/* Material Design 3 Expressive - Codingram Publisher */

/* Material Symbols Outlined - Base Configuration */
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    direction: ltr;
    line-height: 1;
}

/* Material Design 3 Expressive - Dark Theme */
:root[data-theme='dark'] {
    /* Primary Colors - Telegram Blue scheme */
    --md-sys-color-primary: #1a7a9e;
    --md-sys-color-primary-container: #1e508a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #bfdbfe;
    --md-sys-color-primary-hover: #156e8e;

    /* Secondary Colors */
    --md-sys-color-secondary: #9ca3af;
    --md-sys-color-secondary-container: #374151;
    --md-sys-color-on-secondary: #f9fafb;
    --md-sys-color-on-secondary-container: #d1d5db;

    /* Tertiary Colors */
    --md-sys-color-tertiary: #a78bfa;
    --md-sys-color-tertiary-container: #5b21b6;
    --md-sys-color-on-tertiary: #f9fafb;
    --md-sys-color-on-tertiary-container: #ddd6fe;

    /* Error */
    --md-sys-color-error: #ef4444;
    --md-sys-color-error-container: #7f1d1d;
    --md-sys-color-on-error: #f9fafb;
    --md-sys-color-on-error-container: #fecaca;

    /* Warning */
    --md-sys-color-warning: #f59e0b;
    --md-sys-color-warning-container: #78350f;
    --md-sys-color-on-warning: #f9fafb;
    --md-sys-color-on-warning-container: #fde68a;

    /* Success */
    --md-sys-color-success: #10b981;
    --md-sys-color-success-container: #064e3b;
    --md-sys-color-on-success: #f9fafb;
    --md-sys-color-on-success-container: #a7f3d0;

    /* Surface & Background */
    --md-sys-color-surface: #111827; /* main bg */
    --md-sys-color-surface-variant: #1f2937; /* card bg */
    --md-sys-color-surface-container: #1f2937;
    --md-sys-color-surface-container-high: #273342; /* previously cards */
    --md-sys-color-surface-container-highest: #374151; /* inputs, hovers */
    --md-sys-color-on-surface: #f9fafb;
    --md-sys-color-on-surface-variant: #9ca3af;
    --md-sys-color-outline: #374151;
    --md-sys-color-outline-variant: #4b5563;

    /* Shadows & Elevation - Flat SaaS look */
    --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --md-sys-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

    /* Shape - slightly rounded edges, not pill */
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 6px;
    --md-sys-shape-corner-large: 8px;
    --md-sys-shape-corner-extra-large: 12px;
}

/* Material Design 3 Expressive - Light Theme */
:root[data-theme='light'] {
    /* Primary Colors - Telegram Blue scheme */
    --md-sys-color-primary: #1a7a9e;
    --md-sys-color-primary-container: #e0f2fe;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #0369a1;
    --md-sys-color-primary-hover: #156e8e;

    /* Secondary Colors */
    --md-sys-color-secondary: #6b7280;
    --md-sys-color-secondary-container: #f3f4f6;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-on-secondary-container: #374151;

    /* Tertiary Colors */
    --md-sys-color-tertiary: #8b5cf6;
    --md-sys-color-tertiary-container: #ede9fe;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-on-tertiary-container: #4c1d95;

    /* Error */
    --md-sys-color-error: #ef4444;
    --md-sys-color-error-container: #fee2e2;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-on-error-container: #991b1b;

    /* Warning */
    --md-sys-color-warning: #f59e0b;
    --md-sys-color-warning-container: #fef3c7;
    --md-sys-color-on-warning: #ffffff;
    --md-sys-color-on-warning-container: #92400e;

    /* Success */
    --md-sys-color-success: #10b981;
    --md-sys-color-success-container: #d1fae5;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-on-success-container: #065f46;

    /* Surface & Background */
    --md-sys-color-surface: #f3f4f6; /* main bg strongly contrasting to white cards */
    --md-sys-color-surface-variant: #ffffff; /* cards */
    --md-sys-color-surface-container: #ffffff;
    --md-sys-color-surface-container-high: #ffffff;
    --md-sys-color-surface-container-highest: #e5e7eb; /* inputs, hovers */
    --md-sys-color-on-surface: #111827;
    --md-sys-color-on-surface-variant: #4b5563;
    --md-sys-color-outline: #e5e7eb;
    --md-sys-color-outline-variant: #d1d5db;

    /* Shadows & Elevation */
    --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* very subtle */
    --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --md-sys-elevation-4:
        0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

    /* Shape */
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 6px;
    --md-sys-shape-corner-large: 8px;
    --md-sys-shape-corner-extra-large: 12px;
}

/* Default to dark theme */
:root {
    /* Primary Colors - Telegram Blue scheme */
    --md-sys-color-primary: #1a7a9e;
    --md-sys-color-primary-container: #1e508a;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #bfdbfe;
    --md-sys-color-primary-hover: #156e8e;

    /* Secondary Colors */
    --md-sys-color-secondary: #9ca3af;
    --md-sys-color-secondary-container: #374151;
    --md-sys-color-on-secondary: #f9fafb;
    --md-sys-color-on-secondary-container: #d1d5db;

    /* Tertiary Colors */
    --md-sys-color-tertiary: #a78bfa;
    --md-sys-color-tertiary-container: #5b21b6;
    --md-sys-color-on-tertiary: #f9fafb;
    --md-sys-color-on-tertiary-container: #ddd6fe;

    /* Error */
    --md-sys-color-error: #ef4444;
    --md-sys-color-error-container: #7f1d1d;
    --md-sys-color-on-error: #f9fafb;
    --md-sys-color-on-error-container: #fecaca;

    /* Warning */
    --md-sys-color-warning: #f59e0b;
    --md-sys-color-warning-container: #78350f;
    --md-sys-color-on-warning: #f9fafb;
    --md-sys-color-on-warning-container: #fde68a;

    /* Success */
    --md-sys-color-success: #10b981;
    --md-sys-color-success-container: #064e3b;
    --md-sys-color-on-success: #f9fafb;
    --md-sys-color-on-success-container: #a7f3d0;

    /* Surface & Background */
    --md-sys-color-surface: #111827; /* main bg */
    --md-sys-color-surface-variant: #1f2937; /* card bg */
    --md-sys-color-surface-container: #1f2937;
    --md-sys-color-surface-container-high: #1f2937; /* previously cards */
    --md-sys-color-surface-container-highest: #374151; /* inputs, hovers */
    --md-sys-color-on-surface: #f9fafb;
    --md-sys-color-on-surface-variant: #9ca3af;
    --md-sys-color-outline: #374151;
    --md-sys-color-outline-variant: #4b5563;

    /* Shadows & Elevation - Flat SaaS look */
    --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --md-sys-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

    /* Shape */
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 6px;
    --md-sys-shape-corner-large: 8px;
    --md-sys-shape-corner-extra-large: 12px;
}