/* ============================================================
   DESIGN TOKENS - Schulstube
   ============================================================
   Warmes, Apple-inspiriertes Design System
   Schrift: Lexend (Variable Font)
   ============================================================ */

/* === FONT FACE === */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

:root {
    /* === COLOR SCHEME === */
    color-scheme: light dark;

    /* === FONT === */
    --font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* === TYPOGRAPHY SCALE === */
    --type-display:       clamp(1.75rem, 1.5rem + 1.25vw, 2.125rem);
    --type-title-1:       clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
    --type-title-2:       1.375rem;
    --type-title-3:       1.25rem;
    --type-headline:      1.0625rem;
    --type-body:          clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --type-callout:       1rem;
    --type-subhead:       0.9375rem;
    --type-footnote:      0.8125rem;
    --type-caption:       0.75rem;
    --type-caption-small: 0.6875rem;

    /* === FONT WEIGHTS === */
    --weight-regular:     400;
    --weight-medium:      500;
    --weight-semibold:    600;
    --weight-bold:        700;

    /* === BACKGROUNDS === */
    --bg-primary:         #FAF8F5;
    --bg-secondary:       #F3EFE9;
    --bg-tertiary:        #EBE5DC;
    --bg-elevated:        #FFFFFF;

    /* === TEXT === */
    --text-primary:       #2C2520;
    --text-secondary:     #6B5E52;
    --text-tertiary:      #9C8E80;
    --text-on-accent:     #FFFFFF;

    /* === ACCENTS === */
    --accent-primary:         #8B6B4A;
    --accent-primary-hover:   #7A5C3E;
    --accent-primary-subtle:  #F0E6D8;
    --accent-secondary:       #5E7B5A;
    --accent-secondary-subtle:#E5EDE3;

    /* === SEMANTIC COLORS === */
    --color-success:      #5E7B5A;
    --color-success-bg:   #E5EDE3;
    --color-warning:      #C4873B;
    --color-warning-bg:   #FDF0E0;
    --color-error:        #B5493A;
    --color-error-bg:     #F8E5E2;
    --color-info:         #5B7E95;
    --color-info-bg:      #E3EDF2;

    /* === BORDERS === */
    --border-default:     #DDD5CA;
    --border-subtle:      #EBE5DC;
    --border-strong:      #C4B8A8;
    --border-focus:       #8B6B4A;

    /* === SUBJECT COLORS (Satte Variante) === */
    --subject-deutsch:        #9E8530;
    --subject-mathematik:     #5B7E95;
    --subject-nmg:            #5E7B5A;
    --subject-bg:             #C4873B;
    --subject-ttg:            #8E6B5E;
    --subject-musik:          #7B6B8E;
    --subject-bus:            #6B8E7B;
    --subject-mi:             #6B7B8E;
    --subject-ueberfachlich:  #9C8E80;

    /* === SUBJECT COLORS (Subtle Variante - fuer Badges) === */
    --subject-deutsch-bg:         #F5EED8;
    --subject-deutsch-text:       #6B5A20;
    --subject-deutsch-border:     #DFD0A0;
    --subject-mathematik-bg:      #E3EDF2;
    --subject-mathematik-text:    #3D5A6B;
    --subject-mathematik-border:  #B8D0DE;
    --subject-nmg-bg:             #E5EDE3;
    --subject-nmg-text:           #3D5A38;
    --subject-nmg-border:         #B8D0B4;
    --subject-bg-bg:              #FDF0E0;
    --subject-bg-text:            #8B5A1E;
    --subject-bg-border:          #E8CFA8;
    --subject-ttg-bg:             #EDE5E0;
    --subject-ttg-text:           #6B4538;
    --subject-ttg-border:         #D4BBB0;
    --subject-musik-bg:           #EBE5F0;
    --subject-musik-text:         #5A4570;
    --subject-musik-border:       #CBBFD8;
    --subject-bus-bg:             #E5EDE8;
    --subject-bus-text:           #3D6B55;
    --subject-bus-border:         #B4D0C0;
    --subject-mi-bg:              #E3E8ED;
    --subject-mi-text:            #3D4F65;
    --subject-mi-border:          #B4C0D0;
    --subject-ueberfachlich-bg:   #EDEBE8;
    --subject-ueberfachlich-text: #5A524A;
    --subject-ueberfachlich-border:#D0CAC2;

    /* === SPACING (8px base) === */
    --space-0:  0;
    --space-1:  0.125rem;   /* 2px  */
    --space-2:  0.25rem;    /* 4px  */
    --space-3:  0.5rem;     /* 8px  */
    --space-4:  0.75rem;    /* 12px */
    --space-5:  1rem;       /* 16px */
    --space-6:  1.5rem;     /* 24px */
    --space-7:  2rem;       /* 32px */
    --space-8:  3rem;       /* 48px */
    --space-9:  4rem;       /* 64px */

    /* === BORDER RADIUS === */
    --radius-xs:    0.25rem;   /* 4px  */
    --radius-sm:    0.375rem;  /* 6px  */
    --radius-md:    0.5rem;    /* 8px  */
    --radius-lg:    0.75rem;   /* 12px */
    --radius-xl:    1rem;      /* 16px */
    --radius-2xl:   1.25rem;   /* 20px */
    --radius-full:  9999px;

    /* === SHADOWS === */
    --shadow-color: 44, 37, 32;
    --shadow-xs:  0 1px 2px rgba(var(--shadow-color), 0.05);
    --shadow-sm:  0 1px 3px rgba(var(--shadow-color), 0.08),
                  0 1px 2px rgba(var(--shadow-color), 0.04);
    --shadow-md:  0 4px 6px rgba(var(--shadow-color), 0.07),
                  0 2px 4px rgba(var(--shadow-color), 0.04);
    --shadow-lg:  0 10px 20px rgba(var(--shadow-color), 0.08),
                  0 4px 8px rgba(var(--shadow-color), 0.04);
    --shadow-xl:  0 20px 40px rgba(var(--shadow-color), 0.10),
                  0 8px 16px rgba(var(--shadow-color), 0.05);
    --shadow-focus: 0 0 0 3px rgba(139, 107, 74, 0.3);

    /* === TRANSITIONS === */
    --transition-fast:    150ms ease-out;
    --transition-default: 250ms ease-out;
    --transition-slow:    350ms ease-out;

    /* === LAYOUT === */
    --content-max-width:  960px;
    --content-narrow:     640px;
    --sidebar-width:      280px;
    --sidebar-collapsed:  64px;
    --bottom-nav-height:  56px;

    /* === Z-INDEX === */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-sidebar:    300;
    --z-modal:      1000;
    --z-toast:      1100;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary:         #1C1A17;
        --bg-secondary:       #252220;
        --bg-tertiary:        #302C28;
        --bg-elevated:        #2E2A26;

        --text-primary:       #F0EBE5;
        --text-secondary:     #A89888;
        --text-tertiary:      #6B5E52;

        --accent-primary:         #C4A07A;
        --accent-primary-hover:   #D4B08A;
        --accent-primary-subtle:  #3A3028;
        --accent-secondary:       #8AAD84;
        --accent-secondary-subtle:#2A3528;

        --color-success:      #8AAD84;
        --color-success-bg:   #2A3528;
        --color-warning:      #D4A060;
        --color-warning-bg:   #3A2E20;
        --color-error:        #D07060;
        --color-error-bg:     #3A2520;
        --color-info:         #80A8C0;
        --color-info-bg:      #202E38;

        --border-default:     #3A3530;
        --border-subtle:      #2E2A26;
        --border-strong:      #504840;
        --border-focus:       #C4A07A;

        --shadow-color:       0, 0, 0;

        --subject-deutsch:        #D4B860;
        --subject-mathematik:     #80A8C0;
        --subject-nmg:            #8AAD84;
        --subject-bg:             #D4A060;
        --subject-ttg:            #B8907E;
        --subject-musik:          #A898B8;
        --subject-bus:            #8AB8A0;
        --subject-mi:             #8AA0B8;
        --subject-ueberfachlich:  #B8A898;

        --subject-deutsch-bg:         #2E2818;
        --subject-deutsch-text:       #D4B860;
        --subject-mathematik-bg:      #1E2E38;
        --subject-mathematik-text:    #80A8C0;
        --subject-nmg-bg:             #1E2E1E;
        --subject-nmg-text:           #8AAD84;
        --subject-bg-bg:              #302618;
        --subject-bg-text:            #D4A060;
        --subject-ttg-bg:             #2E2420;
        --subject-ttg-text:           #B8907E;
        --subject-musik-bg:           #282030;
        --subject-musik-text:         #A898B8;
        --subject-bus-bg:             #1E2E28;
        --subject-bus-text:           #8AB8A0;
        --subject-mi-bg:              #1E2530;
        --subject-mi-text:            #8AA0B8;
        --subject-ueberfachlich-bg:   #282520;
        --subject-ueberfachlich-text: #B8A898;
    }
}

/* === MANUAL THEME TOGGLE === */
[data-theme="dark"] {
    --bg-primary:         #1C1A17;
    --bg-secondary:       #252220;
    --bg-tertiary:        #302C28;
    --bg-elevated:        #2E2A26;
    --text-primary:       #F0EBE5;
    --text-secondary:     #A89888;
    --text-tertiary:      #6B5E52;
    --accent-primary:     #C4A07A;
    --accent-primary-hover:#D4B08A;
    --accent-primary-subtle:#3A3028;
    --accent-secondary:   #8AAD84;
    --accent-secondary-subtle:#2A3528;
    --color-success:      #8AAD84;
    --color-success-bg:   #2A3528;
    --color-warning:      #D4A060;
    --color-warning-bg:   #3A2E20;
    --color-error:        #D07060;
    --color-error-bg:     #3A2520;
    --color-info:         #80A8C0;
    --color-info-bg:      #202E38;
    --border-default:     #3A3530;
    --border-subtle:      #2E2A26;
    --border-strong:      #504840;
    --border-focus:       #C4A07A;
    --shadow-color:       0, 0, 0;
    --subject-deutsch:        #D4B860;
    --subject-mathematik:     #80A8C0;
    --subject-nmg:            #8AAD84;
    --subject-bg:             #D4A060;
    --subject-ttg:            #B8907E;
    --subject-musik:          #A898B8;
    --subject-bus:            #8AB8A0;
    --subject-mi:             #8AA0B8;
    --subject-ueberfachlich:  #B8A898;
    --subject-deutsch-bg:         #2E2818;
    --subject-deutsch-text:       #D4B860;
    --subject-mathematik-bg:      #1E2E38;
    --subject-mathematik-text:    #80A8C0;
    --subject-nmg-bg:             #1E2E1E;
    --subject-nmg-text:           #8AAD84;
    --subject-bg-bg:              #302618;
    --subject-bg-text:            #D4A060;
    --subject-ttg-bg:             #2E2420;
    --subject-ttg-text:           #B8907E;
    --subject-musik-bg:           #282030;
    --subject-musik-text:         #A898B8;
    --subject-bus-bg:             #1E2E28;
    --subject-bus-text:           #8AB8A0;
    --subject-mi-bg:              #1E2530;
    --subject-mi-text:            #8AA0B8;
    --subject-ueberfachlich-bg:   #282520;
    --subject-ueberfachlich-text: #B8A898;
}