/* =============================================================================
   Kinderabenteuerhof — Design Tokens (the single source of values)
   -----------------------------------------------------------------------------
   STRICT RULE: components (app.css) reference these tokens only. No raw hex, no
   magic px in component rules. To reuse the system in another KAH app, copy this
   file + app.css + the icon sprite; see DESIGN.md.

   Two layers:
     1. Raw palette  (--kah-*)      — the actual values, named by hue/step.
     2. Semantic      (--surface, --ink, --space-*, …) — what components consume.
   Re-theme by repointing the semantic layer; never hardcode the raw layer in a
   component. Greys/status inks are tuned to meet WCAG AA (>=4.5:1) on the cream
   page background.
   ============================================================================= */
:root {
  /* ===== 1. Raw palette ===================================================== */
  /* brand greens */
  --kah-green-500: #7cb342;   /* primary action */
  --kah-green-600: #4b8c35;   /* hover / headings / borders */
  --kah-green-700: #3f7a2c;   /* green text & links on light (AA) */
  --kah-green-050: #f4f8ec;   /* tint: selected / hover fill */
  --kah-green-100: #ecf3df;   /* tint: stronger fill */

  /* surfaces (warm off-whites) */
  --kah-cream:   #f3f5ee;     /* page */
  --kah-white:   #ffffff;     /* cards / inputs */
  --kah-paper:   #fbfcf8;     /* raised panels (drawer) */
  --kah-sunken:  #f1f4ea;     /* table head / code / wells */

  /* ink (greens-leaning neutrals) — AA-tuned */
  --kah-ink-900: #33352f;     /* primary text */
  --kah-ink-700: #5b6052;     /* labels / subtle headings */
  --kah-ink-500: #5f6657;     /* muted body text  (>=4.5:1 on cream) */
  --kah-ink-400: #6b7263;     /* faint hints/crumbs (>=4.5:1 on cream) */

  /* lines */
  --kah-line:     #e0e5d6;    /* default borders / dividers */
  --kah-line-600: #d6dccb;    /* input borders (a touch stronger) */

  /* status (bg + AA-tuned ink) */
  --kah-warn-bg:   #fbe6cf;  --kah-warn-ink:   #8a4413;   /* offen / pending */
  --kah-ok-bg:     #e3efce;  --kah-ok-ink:     #416e1b;   /* erledigt / success */
  --kah-danger:    #c0341f;  --kah-danger-bg:  #faf0ee;   /* destructive */

  /* bordeaux — accent of the confidential "Personal" area (visually distinct
     from every other module; mirrors app/pe_docs.py CONF_RGB) */
  --kah-bordeaux-700: #5f1b2a;
  --kah-bordeaux-600: #7d2437;   /* accent / headings / active nav */
  --kah-bordeaux-100: #e7ccd3;   /* lines on tint */
  --kah-bordeaux-050: #f8edf0;   /* tint fills / badges */

  /* category accents — these MIRROR app/export.py SEG_COLORS; keep in sync */
  --kah-seg-ein:    #1f6db0;  /* Einladung   */
  --kah-seg-prot:   #2b2b2b;  /* Protokoll   */
  --kah-seg-besch:  #c0341f;  /* Beschluss   */
  --kah-seg-versch: #2e7d32;  /* Verschoben  */
  --kah-seg-erg:    #8a8a8a;  /* Ergänzung   */

  /* Organigramm — coloured by node type (from the design palette) */
  --org-core:    #3f72a8;                /* Leitungsteam (core) */
  --org-bereich: var(--kah-green-500);   /* Bereich = brand green #7cb342 */
  --org-gruppe:  #e8a23a;                /* Gruppe = amber */
  --org-ink:     #16240a;                /* dark ink on green/amber bubbles */

  /* ===== 2. Semantic ======================================================= */
  --bg:             var(--kah-cream);
  --surface:        var(--kah-white);
  --surface-raised: var(--kah-paper);
  --surface-sunken: var(--kah-sunken);

  --ink:          var(--kah-ink-900);
  --text-subtle:  var(--kah-ink-700);   /* form labels */
  --text-muted:   var(--kah-ink-500);   /* secondary copy */
  --text-faint:   var(--kah-ink-400);   /* hints, breadcrumbs, counts */
  --muted:        var(--text-muted);    /* back-compat alias */

  --green:        var(--kah-green-500);
  --green-dark:   var(--kah-green-600);
  --green-ink:    var(--kah-green-700);
  --green-tint:   var(--kah-green-050);
  --green-tint-2: var(--kah-green-100);

  --line:        var(--kah-line);
  --line-strong: var(--kah-line-600);

  --warn-bg: var(--kah-warn-bg);  --warn-ink: var(--kah-warn-ink);
  --ok-bg:   var(--kah-ok-bg);    --ok-ink:   var(--kah-ok-ink);
  --danger:  var(--kah-danger);   --danger-bg: var(--kah-danger-bg);

  --confidential:        var(--kah-bordeaux-600);
  --confidential-strong: var(--kah-bordeaux-700);
  --confidential-tint:   var(--kah-bordeaux-050);
  --confidential-line:   var(--kah-bordeaux-100);

  /* ===== Spacing — 4px base scale ========================================== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ===== Radius — 3 tiers ================================================== */
  --radius-sm:  4px;    /* dense: table corners, tags, badges, segment cards */
  --radius:     6px;    /* controls: buttons, inputs, selects, toggles */
  --radius-lg:  10px;   /* containers: cards, modal, drawer, alerts */
  --radius-pill: 999px; /* full-round chips */

  /* ===== Type ============================================================== */
  --font-sans: "Hanken Grotesk", system-ui, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 14px;
  --text-md:  15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
  --lh-tight: 1.2;  --lh: 1.5;
  --fw-normal: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --tracking-caps: .04em;   /* uppercase eyebrows / table headers */

  /* ===== Elevation ========================================================= */
  --shadow-sm:   0 1px 0 rgba(50, 60, 40, .03);     /* table seam */
  --shadow-card: 0 6px 18px rgba(80, 110, 40, .06); /* cards */
  --shadow-pop:  0 14px 36px rgba(40, 50, 30, .16); /* drawer / modal */

  /* ===== Focus ============================================================= */
  --ring:        0 0 0 3px rgba(124, 179, 66, .35); /* input glow */
  --ring-color:  var(--green-dark);                  /* outline color */
  --ring-width:  2px;
  --ring-offset: 2px;

  /* ===== Motion ============================================================ */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .12s; --dur: .18s; --dur-slow: .22s;

  /* ===== Z-index ledger ==================================================== */
  --z-topbar: 30; --z-scrim: 40; --z-drawer: 50;

  /* ===== Page frame ======================================================== */
  --shell-max: 1160px;
}