/* ============================================================================
   Backstuben-Produktionssystem — Design-Tokens
   Extrahiert aus paper.design Export (12.05.2026)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* === Farben === */
    --bg-cream:           #FAF8F3;  /* Hauptbackground, warmes Off-White */
    --bg-warm-surface:    #F0E9DA;  /* Sub-Rezept-Blocks, aktive Nav-Tabs */
    --bg-rose-tint:       #FBF3EF;  /* sehr heller Bordeaux-Tint, aktive Listen-Zeile */
    --bg-banner-rot:      #A03F32;  /* Oberer Banner */

    --text-primary:       #1F1B17;  /* Hauptschrift, dunkles Braun-Schwarz */
    --text-secondary:     #7A7060;  /* Body-Sekundär, Caps-Labels */
    --text-muted:         #A39684;  /* Ausgegraute Info (z.B. leere Tage) */
    --text-strike:        #C0B4A4;  /* Strikethrough-Linie, Plan-Border für Anstehend */

    --accent-rot:         #B0413E;  /* Bordeaux-Akzent, Zahlen, Highlights */
    --accent-rot-deep:    #A03F32;  /* Banner-Ton, sehr selten */
    --accent-rot-soft:    #E8C9C5;  /* Border bei Warnungs-Karten */

    --border-soft:        #E6E0D5;  /* Standard-Trennlinien */
    --border-extra-soft:  #D6CFC0;  /* sehr dezente Trenner, z.B. "·" */
    --border-strong:      #1F1B17;  /* Section-Trenner, sehr selten */

    /* Pastell-Marker für Personen / B2B-Kunden */
    --marker-blue:        #C5D7E6;
    --marker-yellow:      #F5DCAF;
    --marker-green:       #C4E0CB;
    --marker-rose:        #F6CFE0;

    /* === Typografie === */
    --font-display:       "Fraunces", "Söhne", system-ui, serif;
    --font-body:          "Inter", system-ui, sans-serif;
    --font-mono:          "JetBrains Mono", "SF Mono", Consolas, monospace;

    /* Display-Skala */
    --fs-display-3xl:     84px;  /* Login-Hero "Wer arbeitet heute?" */
    --fs-display-2xl:     72px;  /* Rezept-Titel "Zopf" */
    --fs-display-xl:      64px;  /* "Guten Morgen, Daniel." */
    --fs-display-lg:      42px;  /* "KW 20" */
    --fs-display-md:      38px;  /* Zahl-Highlight */
    --fs-display-sm:      28px;  /* Section-Headlines */
    --fs-display-xs:      24px;  /* Sub-Headlines / Tagespläne */
    --fs-display-2xs:     20px;  /* Listen-Item-Headlines */

    /* Body-Skala */
    --fs-body-lg:         15px;
    --fs-body-md:         14px;
    --fs-body-sm:         13px;
    --fs-body-xs:         12px;
    --fs-label:           11px;  /* Caps-Labels */
    --fs-label-sm:        10px;  /* Mini-Caps (Wochentage) */

    /* Line-Heights */
    --lh-display-3xl:     88px;
    --lh-display-2xl:     78px;
    --lh-display-xl:      70px;
    --lh-display-lg:      46px;
    --lh-display-md:      42px;
    --lh-display-sm:      32px;
    --lh-tight:           1.1;
    --lh-snug:            1.2;
    --lh-normal:          1.5;
    --lh-relaxed:         1.65;

    /* Letter-Spacings */
    --ls-display:         -0.025em;
    --ls-display-tight:   -0.02em;
    --ls-display-snug:    -0.01em;
    --ls-caps:            0.14em;
    --ls-caps-loose:      0.18em;
    --ls-caps-mini:       0.16em;

    /* === Spacing-Skala (8pt + Sub-Steps) === */
    --space-0:            0;
    --space-1:            4px;
    --space-2:            8px;
    --space-3:            12px;
    --space-4:            16px;
    --space-5:            20px;
    --space-6:            24px;
    --space-7:            28px;
    --space-8:            32px;
    --space-9:            36px;
    --space-10:           40px;
    --space-12:           48px;
    --space-14:           56px;
    --space-16:           64px;
    --space-18:           72px;

    /* === Layout === */
    --content-max-width:  1440px;
    --content-padding-x:  56px;
    --content-padding-x-tablet: 32px;
    --content-padding-x-mobile: 20px;

    /* === Radii === */
    --radius-sm:          4px;
    --radius-md:          6px;
    --radius-lg:          12px;
    --radius-pill:        999px;
    --radius-circle:      50%;

    /* === Transition === */
    --tx-fast:            150ms ease;
    --tx-normal:          250ms ease;
}

/* === Globale Resets === */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-cream);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* === Utility-Klassen für die Typografie-Skala === */

.label {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    line-height: 14px;
    text-transform: uppercase;
}

.label--loose {
    letter-spacing: var(--ls-caps-loose);
}

.label--mini {
    font-size: var(--fs-label-sm);
    letter-spacing: var(--ls-caps-mini);
    line-height: 12px;
}

.display-3xl {
    font-family: var(--font-display);
    font-size: var(--fs-display-3xl);
    font-weight: 500;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display-3xl);
}

.display-2xl {
    font-family: var(--font-display);
    font-size: var(--fs-display-2xl);
    font-weight: 500;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display-2xl);
}

.display-xl {
    font-family: var(--font-display);
    font-size: var(--fs-display-xl);
    font-weight: 500;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-display-xl);
}

.display-lg {
    font-family: var(--font-display);
    font-size: var(--fs-display-lg);
    font-weight: 500;
    letter-spacing: var(--ls-display-tight);
    line-height: var(--lh-display-lg);
}

.display-md {
    font-family: var(--font-display);
    font-size: var(--fs-display-md);
    font-weight: 500;
    letter-spacing: var(--ls-display-tight);
    line-height: var(--lh-display-md);
}

.display-sm {
    font-family: var(--font-display);
    font-size: var(--fs-display-sm);
    font-weight: 500;
    letter-spacing: var(--ls-display-snug);
    line-height: var(--lh-display-sm);
}

.display-xs {
    font-family: var(--font-display);
    font-size: var(--fs-display-xs);
    font-weight: 500;
    letter-spacing: var(--ls-display-snug);
    line-height: 28px;
}

.display-2xs {
    font-family: var(--font-display);
    font-size: var(--fs-display-2xs);
    font-weight: 500;
    letter-spacing: var(--ls-display-snug);
    line-height: 24px;
}

.text-accent {
    color: var(--accent-rot);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.numeric {
    font-variant-numeric: tabular-nums;
}