/* =================================================================
   NON-FOOD-PORTAL · DESIGN TOKENS
   Single Source of Truth. Branding pro Mandant = nur Token-Werte ändern.
   Der brillante Akzent ist EIN Token: --accent.
   ================================================================= */

:root {
  /* ---------- FARBE · Neutrale (wirklich neutral, ohne Stich) ---------- */
  --c-white:        #ffffff;
  --c-paper:        #fbfbfc;   /* App-Hintergrund, kaum wahrnehmbar kühler */
  --c-surface:      #ffffff;   /* Karten / erhöhte Flächen */
  --c-surface-2:    #f5f6f7;   /* gefüllte Felder, ruhige Zonen */
  --c-surface-3:    #eef0f1;   /* Hover auf ruhigen Flächen */

  --c-ink:          #16181c;   /* tiefes Anthrazit – Headlines */
  --c-ink-2:        #3a3d44;   /* Fließtext */
  --c-ink-3:        #6b7078;   /* Sekundärtext */
  --c-ink-4:        #9aa0a8;   /* Tertiär / Platzhalter */

  --c-line:         #e7e9ec;   /* zarte Trennlinie (Hairline) */
  --c-line-strong:  #d8dbdf;   /* betonte Linie */

  /* ---------- FARBE · Brillanter Akzent (Apple-Blau) ---------- */
  --accent:         #007dff;
  --accent-press:   #0064d6;   /* gedrückt / aktiv */
  --accent-tint:    #eaf3ff;   /* sehr dezente Akzentfläche */
  --accent-tint-2:  #d6e8ff;
  --on-accent:      #ffffff;
  --accent-focus:   rgba(0, 125, 255, 0.32);

  /* ---------- FARBE · Status (klar & satt, sparsam dosiert) ---------- */
  --ok:             oklch(0.66 0.16 159);
  --ok-tint:        oklch(0.955 0.032 159);
  --warn:           #c8870d;
  --warn-tint:      #fbf2df;
  --err:            #e0314b;
  --err-tint:       #fcebee;
  --info:           var(--accent);
  --info-tint:      var(--accent-tint);

  /* ---------- STATUS-MELDUNGEN (semantische Alert-Tokens) ----------
     Komposit aus der bestehenden Palette: Fläche (tint) + Text + Rand.
     Text bewusst dunkel angemischt für ausreichenden Kontrast (BFSG/EAA).
     Genutzt von der .alert-Komponente – sichtbar, aber ruhig/edel. */
  --success-surface: var(--ok-tint);
  --success-text:    color-mix(in srgb, var(--ok) 72%, #000);
  --success-border:  color-mix(in srgb, var(--ok) 40%, transparent);

  --warning-surface: var(--warn-tint);
  --warning-text:    color-mix(in srgb, var(--warn) 78%, #000);
  --warning-border:  color-mix(in srgb, var(--warn) 42%, transparent);

  --danger-surface:  var(--err-tint);
  --danger-text:     color-mix(in srgb, var(--err) 76%, #000);
  --danger-border:   color-mix(in srgb, var(--err) 42%, transparent);

  --info-surface:    var(--accent-tint);
  --info-text:       var(--accent-press);
  --info-border:     color-mix(in srgb, var(--accent) 38%, transparent);

  /* ---------- TYPOGRAFIE ---------- */
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  /* Skala (modular, ~1.25 mit ruhigen Sprüngen) */
  --t-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);  /* Hero */
  --t-h1:       clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-h2:       clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-h3:       1.3125rem;   /* 21 */
  --t-h4:       1.0625rem;   /* 17 */
  --t-body:     1rem;        /* 16 */
  --t-sm:       0.9375rem;   /* 15 */
  --t-xs:       0.8125rem;   /* 13 */
  --t-2xs:      0.6875rem;   /* 11 – Labels/Eyebrow */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.62;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    680;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.011em;
  --tracking-label:  0.06em;

  /* ---------- ABSTAND (4px-Raster) ---------- */
  --s-1:  0.25rem;   /* 4  */
  --s-2:  0.5rem;    /* 8  */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.5rem;    /* 40 */
  --s-8:  3.5rem;    /* 56 */
  --s-9:  5rem;      /* 80 */
  --s-10: 7rem;      /* 112 */
  --s-11: 9.5rem;    /* 152 */

  /* ---------- RADIEN (mittel weich) ---------- */
  --r-xs:   8px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- LINIEN / RÄNDER ---------- */
  --bd-hair:   1px solid var(--c-line);
  --bd-strong: 1px solid var(--c-line-strong);

  /* ---------- ELEVATION (extrem zurückhaltend, KEINE dicken Schatten) ---------- */
  --el-1: 0 1px 2px rgba(20, 24, 28, 0.04), 0 0 0 1px rgba(20, 24, 28, 0.04);
  --el-2: 0 6px 24px -12px rgba(20, 24, 28, 0.16), 0 0 0 1px rgba(20, 24, 28, 0.05);
  --el-pop: 0 18px 50px -18px rgba(20, 24, 28, 0.28), 0 0 0 1px rgba(20, 24, 28, 0.06);

  /* ---------- LAYOUT ---------- */
  --container:      1200px;
  --container-prose: 760px;
  --header-h:       64px;

  /* ---------- BEWEGUNG (ruhig, souverän) ---------- */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1:     0.14s;
  --dur-2:     0.22s;
  --dur-3:     0.4s;

  --focus-ring: 0 0 0 4px var(--accent-focus);
}

/* =================================================================
   DARK MODE · Neutrale werden echte Dunkeltöne ohne Stich,
   Akzent bleibt gleich leuchtend.
   Aktivierbar via [data-theme="dark"] ODER Systempräferenz.
   ================================================================= */
:root[data-theme="dark"] {
  --c-white:     #ffffff;
  --c-paper:     #0c0d0f;
  --c-surface:   #161719;
  --c-surface-2: #1e2023;
  --c-surface-3: #26282c;

  --c-ink:    #f4f5f6;
  --c-ink-2:  #c9cccf;
  --c-ink-3:  #9498a0;
  --c-ink-4:  #6a6f77;

  --c-line:        #2a2c30;
  --c-line-strong: #3a3d42;

  --accent:        #2b93ff;
  --accent-press:  #5aabff;
  --accent-tint:   #12243a;
  --accent-tint-2: #163152;
  --accent-focus:  rgba(43, 147, 255, 0.4);

  --ok-tint:   #11251a;
  --warn-tint: #2a2310;
  --err-tint:  #2c1418;

  /* Alert-Texte im Dark Mode hell anmischen (Kontrast auf dunkler Fläche). */
  --success-text: color-mix(in srgb, var(--ok) 70%, #fff);
  --warning-text: color-mix(in srgb, var(--warn) 70%, #fff);
  --danger-text:  color-mix(in srgb, var(--err) 72%, #fff);
  --info-text:    color-mix(in srgb, var(--accent) 72%, #fff);

  --el-1: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --el-2: 0 8px 28px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  --el-pop: 0 22px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper:     #0c0d0f;
    --c-surface:   #161719;
    --c-surface-2: #1e2023;
    --c-surface-3: #26282c;
    --c-ink:    #f4f5f6;
    --c-ink-2:  #c9cccf;
    --c-ink-3:  #9498a0;
    --c-ink-4:  #6a6f77;
    --c-line:        #2a2c30;
    --c-line-strong: #3a3d42;
    --accent:        #2b93ff;
    --accent-press:  #5aabff;
    --accent-tint:   #12243a;
    --accent-tint-2: #163152;
    --accent-focus:  rgba(43, 147, 255, 0.4);
    --ok-tint:   #11251a;
    --warn-tint: #2a2310;
    --err-tint:  #2c1418;
    --success-text: color-mix(in srgb, var(--ok) 70%, #fff);
    --warning-text: color-mix(in srgb, var(--warn) 70%, #fff);
    --danger-text:  color-mix(in srgb, var(--err) 72%, #fff);
    --info-text:    color-mix(in srgb, var(--accent) 72%, #fff);
  }
}