/* tokens/fonts.css */
/* ============================================================
   Poppins — die einzige Marken-Familie. Selbst gehostet aus
   assets/fonts/ (SIL Open Font License, siehe assets/fonts/OFL.txt).
   Acht Schnitte: Light 300 + Italic, Regular 400 + Italic,
   Medium 500, SemiBold 600, Bold 700, ExtraBold 800.
   Light-Italic ist die Signatur der Marke.
   ============================================================ */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Poppins-Light.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/Poppins-LightItalic.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Poppins-Regular.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Poppins-Italic.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Poppins-Medium.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Poppins-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Poppins-Bold.ttf') format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Poppins-ExtraBold.ttf') format('truetype')}

/* tokens/colors.css */
/* ============================================================
   Colors — formatfroehlich × reframe.
   Grund: reframe-Creme. Struktur & Akzenttext: formatfroehlich-Navy.
   Rollen sind getrennt und nicht austauschbar:
     Amber = Betonung.    Akzentwort, CTA, Metrik, Signal.
     Navy  = Struktur.    Links, Kanten, Nav-Zustand, Verlauf, Info.
     Ink   = Lesen.       Headlines, Fließtext.
   Navy betont nie. Ein Akzentwort in Navy ist ein Fehler — Betonung
   ist immer Amber, auf beiden Gründen.
   Kein abgedunkeltes Amber. Kein Braun.
   Hell ist Standard; Dunkel via [data-theme="dark"].
   ============================================================ */
:root {
  /* — Marken-Kern (feste Farbwerte, modusunabhängig) — */
  --sf-amber:        #ffa31a; /* der einzige Akzent */
  --sf-amber-light:  #ffb84d; /* Hover */
  --sf-amber-deep:   #cc7a00; /* Gradient-Ende, Pressed */
  --sf-navy:         #1a3a6c; /* Struktur: Links, Kanten, Nav-Zustand */
  --sf-navy-bright:  #2a5bd7; /* Links, Unterstreichungen */
  --sf-creme:        #f7f2e9; /* Heller Grund — nie reines Weiß */
  --sf-creme-2:      #efe7d8; /* Zweite Creme-Stufe */
  --sf-near-black:   #07090e; /* Dunkler Grund — nie reines Schwarz */
  --sf-footer:       #0f1520; /* Footer — immer dunkel, in beiden Modi */

  /* — Flächen (Hell) — */
  --sf-bg:        #f7f2e9;
  --sf-bg-alt:    #efe7d8;
  --sf-surface:   #ffffff;
  --sf-surface-t: rgba(255,255,255,0.72); /* Glas: Nav, Modal */

  /* — Text (Hell) — */
  --sf-heading: #1c1a17;  /* Ink trägt Headlines — Navy nur im Akzentwort */
  --sf-text:    #1c1a17;  /* Fließtext */
  --sf-text-2:  #4a4640;  /* Sekundärtext, Bildunterschriften */
  --sf-muted:   #6a6559;  /* Meta, Platzhalter, Labels */

  /* — Akzent — */
  --sf-accent:      #ffa31a; /* Betonung: Akzentwort, CTA, Metrik, Signal */
  --sf-accent-ink:  #1a3a6c; /* Links & Overlines — NICHT für Akzentwörter oder Zahlen */
  --sf-accent-glow: rgba(255,163,26,0.15);
  --sf-on-accent:   #14120f; /* Text auf Amber-Fläche */

  /* — Linien (navy getönt, nicht schwarz-warm) — */
  --sf-border:        rgba(26,58,108,0.18);
  --sf-border-strong: rgba(26,58,108,0.30);

  /* — Status. Immer Wort + Farbe. — */
  --sf-ok:   #16a34a;  --sf-ok-ink:  #15803d;  --sf-ok-bg:  rgba(22,163,74,0.10);  /* Erfolg · Bestätigt */
  --sf-warn: #ffa31a;  --sf-warn-ink:#1c1a17;  --sf-warn-bg:rgba(255,163,26,0.14); /* Warnung · Warteliste */
  --sf-err:  #c0392b;  --sf-err-ink: #b91c1c;  --sf-err-bg: rgba(192,57,43,0.10);  /* Fehler · Storniert */
  --sf-info: #2a5bd7;  --sf-info-ink:#1a3a6c;  --sf-info-bg:rgba(42,91,215,0.10);  /* Info · Hinweis */

  /* — Sub-Marken. Nur auf eigenen Flächen, nie im Kern-Portfolio. — */
  --sf-reframe-pine:  #1e2b24; /* reframe Retreat — Basis */
  --sf-reframe-amber: #ffa31a; /* reframe — Signal */
  --sf-reframe-green: #1e2b24; /* Alias (Altbestand) */
  --sf-trailer-blue:  #2a5bd7; /* Trailer / Video */

  /* — Medien-Overlay — */
  --sf-overlay: rgba(7,9,14,0.55);

  /* — Verläufe. Navy ist hier Komplementärfarbe zu Amber: zwei
       gerichtete Lichtquellen über ruhigem Grund, nie ein Farbband. — */
  --sf-grad-dark:  radial-gradient(1100px 700px at 78% 14%, rgba(255,163,26,0.18), transparent 68%),
                   radial-gradient(1000px 760px at 12% 88%, rgba(42,91,215,0.24), transparent 70%),
                   #07090e; /* @kind color */
  --sf-grad-light: radial-gradient(900px 620px at 88% 8%, rgba(255,163,26,0.16), transparent 66%),
                   radial-gradient(820px 640px at 6% 92%, rgba(42,91,215,0.18), transparent 68%),
                   #f7f2e9; /* @kind color */
  --sf-grad-edge:  linear-gradient(120deg, #ffa31a 0%, #cc7a00 42%, #1a3a6c 100%); /* @kind color */

  /* — Glas. Zwei Stufen: schwebend (Nav, Modal) und ruhend (Panel auf Verlauf). — */
  --sf-glass:        rgba(255,255,255,0.60);
  --sf-glass-strong: rgba(255,255,255,0.78);
  --sf-glass-tint:   rgba(26,58,108,0.07); /* Navy-Hauch im Glas auf Hell */
  --sf-glass-hi:     rgba(255,255,255,0.85); /* innere Lichtkante oben */
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --sf-bg:        #07090e;
  --sf-bg-alt:    #0d0f14;
  --sf-surface:   rgba(255,255,255,0.045); /* Glas */
  --sf-surface-t: rgba(13,15,20,0.80);

  --sf-heading: #ffffff;
  --sf-text:    #e2e2e2;
  --sf-text-2:  rgba(226,226,226,0.66);
  --sf-muted:   rgba(226,226,226,0.52);

  --sf-accent:      #ffa31a;
  --sf-accent-ink:  #ffa31a; /* auf dunklem Grund trägt Amber den Text */
  --sf-accent-glow: rgba(255,163,26,0.30);
  --sf-on-accent:   #07090e;

  --sf-border:        rgba(255,255,255,0.09);
  --sf-border-strong: rgba(255,255,255,0.16);

  --sf-grad-light: var(--sf-grad-dark); /* @kind color */
  --sf-glass:        rgba(255,255,255,0.055);
  --sf-glass-strong: rgba(255,255,255,0.09);
  --sf-glass-tint:   rgba(42,91,215,0.10);
  --sf-glass-hi:     rgba(255,255,255,0.14);

  --sf-ok-ink:   #4ade80;  --sf-ok-bg:  rgba(74,222,128,0.14);
  --sf-warn-ink: #ffb84d;  --sf-warn-bg:rgba(255,184,77,0.14);
  --sf-err-ink:  #f87171;  --sf-err-bg: rgba(248,113,113,0.14);
  --sf-info-ink: #7da2f0;  --sf-info-bg:rgba(125,162,240,0.14);
}

/* tokens/typography.css */
/* ============================================================
   Typography — one family, Poppins. Light-Italic is the signature move.
   Modular scale (major third, 1.25) from 16px.
   ============================================================ */
:root {
  --sf-font:      'Poppins', system-ui, -apple-system, sans-serif;
  --sf-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Type scale — */
  --sf-fs-xs:      12px;  /* overline, labels */
  --sf-fs-sm:      14px;  /* small, meta */
  --sf-fs-base:    16px;  /* body */
  --sf-fs-lg:      20px;  /* lead */
  --sf-fs-xl:      25px;  /* h3 */
  --sf-fs-2xl:     31px;  /* h2 */
  --sf-fs-3xl:     39px;  /* h1 */
  --sf-fs-display: 61px;  /* display */

  /* — Fluid scale (mobile → desktop), for hero & section headings — */
  --sf-fs-fluid-display: clamp(40px, 7vw, 76px);  /* @kind font */
  --sf-fs-fluid-h1:      clamp(34px, 5vw, 61px);  /* @kind font */
  --sf-fs-fluid-h2:      clamp(26px, 3.4vw, 39px);/* @kind font */
  --sf-fs-fluid-h3:      clamp(20px, 1.6vw, 25px);/* @kind font */

  /* — Weights — */
  --sf-w-light:    300; /* @kind font */
  --sf-w-regular:  400; /* @kind font */
  --sf-w-medium:   500; /* @kind font */
  --sf-w-semibold: 600; /* @kind font */
  --sf-w-bold:     700; /* @kind font */
  --sf-w-extrabold:800; /* @kind font */

  /* — Tracking — */
  --sf-track-head:    -0.03em; /* @kind font */
  --sf-track-overline: 0.15em; /* @kind font */
}

/* tokens/spacing.css */
/* ============================================================
   Spacing (4px grid), radii, elevation. Glass + motion live in motion.css.
   ============================================================ */
:root {
  /* — Spacing · 4px grid — */
  --sf-space-1:   4px;
  --sf-space-2:   8px;
  --sf-space-3:  12px;
  --sf-space-4:  16px;
  --sf-space-6:  24px;
  --sf-space-8:  32px;
  --sf-space-12: 48px;
  --sf-space-16: 64px;
  --sf-space-24: 96px;

  /* — Radii — */
  --sf-radius-sm:   6px;
  --sf-radius-md:  12px;
  --sf-radius-lg:  18px;
  --sf-radius-xl:  24px;
  --sf-radius-pill:100px; /* nur Tags, Chips, Badges */
  --sf-radius-button: 9px; /* Buttons — nie Pille */
  --sf-radius-input:  8px;

  /* — Fokus (immer sichtbar, Amber trägt auf jedem Grund) — */
  --sf-focus-color:  #ffa31a;
  --sf-focus-width:  2px;
  --sf-focus-offset: 2px;

  /* — Textmaß — */
  --sf-measure: 68ch;

  /* — Fixierte Nav: Höhe ist ein Token, damit kein Abschnitt darunter
       verschwindet. Jede Sektion hält diesen Abstand nach oben frei. — */
  --sf-nav-h: 64px;

  /* — Untergrenze für Amber-Signalzahlen auf hellem Grund.
       Darunter trägt Amber nicht: dann Ink Bold. — */
  --sf-metric-min: 48px;

  /* — Elevation — */
  --sf-shadow-1: 0 1px 4px rgba(0,0,0,0.06);   /* chips, buttons, inputs */
  --sf-shadow-2: 0 6px 24px rgba(0,0,0,0.09);  /* cards, nav pill */
  --sf-shadow-3: 0 16px 56px rgba(0,0,0,0.14); /* modals, hover-lift */

}

/* tokens/motion.css */
/* ============================================================
   Motion & glass — soft spring-out easing, transform + opacity only.
   ============================================================ */
:root {
  --sf-ease:       cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --sf-ease-in:    cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --sf-dur-hover:  150ms; /* @kind other */
  --sf-dur-ui:     240ms; /* @kind other */
  --sf-dur-frost:  340ms; /* @kind other */
  --sf-dur-entrance: 700ms; /* @kind other */

  /* — Glass (only on floating surfaces: nav, modal, overlay) — */
  --sf-glass-blur:   blur(20px) saturate(1.5); /* @kind other */
  --sf-glass-border: 1px solid rgba(255,255,255,0.9); /* @kind other */
}

[data-theme="dark"] {
  --sf-glass-border: 1px solid rgba(255,255,255,0.14); /* @kind other */
}