/* ============================================================================
 * hivefour Designsystem — Tokens (EINZIGE Fassung, SB-173)
 *
 * BASIS: Shinefour Design System (Claude-Design-Projekt
 *   314b9728-8385-4eff-9514-ed7cc5ab73cf, tokens/colors|typography|spacing|effects.css),
 *   Stand des Abgleichs 14.10.2026.
 *
 * BEWUSSTE ABWEICHUNGEN von Shinefour (an uxui@shinefour.de gemeldet):
 *   - Eyebrow: Lato 13 px fett, Satzschreibung, ohne Laufweite (Shinefour: Mono-Versalien mit "// ")
 *   - Abstände 12 und 32 px für die App (Shinefour verbietet sie)
 *   - --fs-micro 12 px als Mindestgröße, App-Skala --fs-app-*
 *   - Abstufungen vorhandener Farben: --pop-50/-700, --amber-*, --green-*, --red-*, --success-700
 *   - Bedeutungs-Ebene --role-*, --status-*, --level-*, --diff-*, --rank-* (nur hivefour)
 *
 * NICHT KOPIEREN. Wer diese Werte braucht, bindet DIESE Datei ein:
 *   - webapp/, docs-site/ (und fuer tokens.css das Keycloak-Theme)
 *     -> `make designsystem-sync` (Vendor-Kopie)
 * Ein zweites `--b-800:`-Literal im Repo laesst
 * gui/designsystem/test_token_drift.py fehlschlagen. Das ist Absicht.
 *
 * Aendern eines Tokens: hier aendern, dann `make designsystem-sync`.
 * Werte NIE in Komponenten hartkodieren.
 * ==========================================================================*/

/* Shinefour — Colors
   Indigo is the brand. Lavender is the only accent. No cyan, no new colors. */

:root {
  /* ── Indigo (Primary) ─────────────────────────────────────────── */
  --b-50:  #F5F4FB;   /* page tint, hover bg */
  --b-100: #E3DFF2;
  --b-200: #C5BDE4;
  --b-300: #A095CB;
  --b-400: #756AAE;
  --b-500: #4D4391;   /* button hover */
  --b-600: #2F2776;
  --b-700: #221A66;
  --b-800: #1E136E;   /* MAIN — headlines, buttons, nav, dark bg */
  --b-900: #150B4D;   /* footer */
  --b-950: #0B0632;

  /* ── Lavender / Highlight (Accent) ────────────────────────────── */
  --hl-50:  #FAF6FF;
  --hl-100: #F1E9FF;
  --hl-200: #DFD0FF;   /* decor, 404 number */
  --hl-300: #C9B7FF;   /* ACCENT — CTAs on dark bg, links */
  --hl-400: #A78BFA;
  --hl-500: #8B5CF6;   /* eyebrows, icons */
  --hl-600: #7C3AED;   /* <em> accents in headlines (light bg) */
  --hl-700: #6D28D9;

  /* ── Neutral ──────────────────────────────────────────────────── */
  --n-0:   #FFFFFF;    /* default page background */
  --n-50:  #FAFAFC;
  --n-100: #F2F2F6;
  --n-200: #E5E5EC;    /* borders, dividers */
  --n-300: #D1D1DA;    /* secondary borders */
  --n-400: #A0A0AD;    /* placeholder */
  --n-500: #71717A;    /* secondary text, eyebrows */
  --n-600: #52525B;    /* body secondary */
  --n-700: #3F3F46;
  --n-800: #27272A;
  --n-900: #18181B;    /* primary body text */

  /* ── Status ───────────────────────────────────────────────────── */
  --success: #16A34A;
  --success-500: #16A34A;
  --error: #DC2626;
  --error-500: #DC2626;
  --amber-50:  #FFFBEB;   /* Hinweis-Fläche (gleicher Wert wie .tag-amber/.notice-amber) */
  --amber-200: #FDE68A;   /* Hinweis-Rand (dekorativ, der Text trägt die Information) */
  --amber-700: #B45309;   /* Hinweis-Text, 5,0:1 auf Weiß, 4,8:1 auf --amber-50 */
  --amber-800: #92400E;   /* Hinweis-Text im Banner, 6,8:1 auf --amber-50 */
  --green-50:  #F0FDF4;   /* Erfolgs-Fläche */
  --green-200: #BBF7D0;   /* Erfolgs-Rand */
  --red-50:  #FEF2F2;     /* Fehler-Fläche */
  --red-200: #FECACA;     /* Fehler-Rand */
  --red-700: #B91C1C;     /* Fehler-Text auf --red-50, 5,9:1 */
  --success-700: #15803D; /* hivefour-Ergänzung, an Shinefour gemeldet: Erfolgstext, 5,0:1 auf Weiß */

  /* ── Pop magenta: die Rolle "Agent" in hivefour (Entscheidung 14.10.2026). Nur Marken, Dreiecke, 2-px-Linien. ── */
  --pop-50:  #FAE8FF;     /* hivefour-Ergänzung, an Shinefour gemeldet: nur Fläche hinter Agent-Änderungen */
  --pop-500: #E879F9;     /* 2,5:1 - nie Text, nie informative Grafik */
  --pop-700: #A21CAF;     /* hivefour-Ergänzung, an Shinefour gemeldet: Agent-Text, 6,3:1 auf Weiß */

  /* ── Semantic aliases ─────────────────────────────────────────── */
  --surface-page:      var(--n-0);
  --surface-tint:      var(--b-50);    /* zebra alt section */
  --surface-card:      var(--n-0);
  --surface-dark:      var(--b-800);   /* cover / CTA — FLAT, never gradient */
  --surface-footer:    var(--b-900);

  --text-heading:      var(--b-800);
  --text-body:         var(--n-900);
  --text-secondary:    var(--n-600);
  --text-eyebrow:      var(--n-700);   /* small sentence-case section heading (.eyebrow) */
  --text-on-dark:      #FFFFFF;
  --text-on-dark-soft: rgba(255,255,255,.65);

  --accent:            var(--hl-600);  /* em on light bg */
  --accent-on-dark:    var(--hl-300);  /* em / links / CTA on dark bg */

  --border-default:    var(--n-200);
  --border-secondary:  var(--n-300);
  --border-on-dark:    rgba(255,255,255,.13);

  /* ── hivefour: Bedeutung (Rollen, Status, Verbindlichkeit). Komponenten lesen nur diese Ebene. ── */
  --role-human-shape:   var(--hl-300);  /* 1,8:1 - nur dekorativ */
  --role-human-surface: var(--hl-100);
  --role-human-text:    var(--hl-700);  /* 7,1:1 */
  --role-human-mark:    var(--hl-500);  /* 4,2:1 - freistehende Marke mit aria-label */
  --role-agent-shape:   var(--pop-500); /* 2,5:1 - nur dekorativ */
  --role-agent-surface: var(--pop-50);
  --role-agent-text:    var(--pop-700); /* 6,3:1 */
  --role-agent-mark:    var(--pop-700);

  --status-success-text:   var(--success-700);
  --status-error-text:     var(--error);
  --status-error-text-strong: var(--red-700);
  --status-error-surface:  var(--red-50);
  --status-error-border:   var(--red-200);
  --status-pending-text:   var(--b-800);
  --status-hint-text:      var(--amber-700); /* Amber heißt nur "Hinweis" */
  --status-hint-text-strong: var(--amber-800);
  --status-hint-surface:   var(--amber-50);
  --status-hint-border:    var(--amber-200);
  --status-success-surface: var(--green-50);
  --status-success-border:  var(--green-200);
  --role-system-surface:   var(--n-100);
  --role-system-text:      var(--n-600);

  --diff-removed-surface:  var(--n-100);
  --diff-removed-text:     var(--n-600);
  --diff-added-surface:    var(--b-50);
  --diff-added-text:       var(--success-700);

  --level-filled: var(--b-800);  /* Verbindlichkeit: gefüllter Balken */
  --level-empty:  var(--b-200);  /* 1,8:1 - nur tragbar, weil der Name immer daneben steht */
  --level-text:       var(--b-800);
  --level-text-draft: var(--n-600);
  --rank-surface: var(--b-50);   /* RankChip hell, für alle Ränge gleich (14.10.2026) */
  --rank-text:    var(--b-800);  /* 14,0:1 */
}

/* hivefour — Typography
   Three fonts only, all self-hosted (fonts.css): Lato (all UI and text), Instrument Serif (italic accent word,
   only on the login and demo pages), JetBrains Mono (paths, IDs, code). Nothing else.
   Minimum text size in the UI: 12px. */

:root {
  --font-sans:  'Lato', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;   /* ONLY as <em> accent on login and demo pages */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;   /* paths, IDs, code only - not dates, numbers, labels or table heads */

  /* Fluid display scale (web) */
  --fs-h1: clamp(56px, 7vw, 96px);      /* @kind font */
  --fs-h2: clamp(44px, 5.5vw, 72px);    /* @kind font */
  --fs-h3: clamp(32px, 3.8vw, 48px);    /* @kind font */
  --fs-h4: clamp(22px, 2.8vw, 34px);    /* @kind font */
  --fs-h5: 24px;                        /* @kind font */
  --fs-h6: 20px;                        /* @kind font */  /* compact card/section title — print & slides */

  /* Fixed display scale — for FIXED-SIZE media (PDF sheets, slides) where
     viewport-relative clamp() is unreliable. Mirrors the fluid scale's intent. */
  --fs-h1-fixed: 72px;                  /* @kind font */
  --fs-h2-fixed: 56px;                  /* @kind font */
  --fs-h3-fixed: 40px;                  /* @kind font */
  --fs-h4-fixed: 28px;                  /* @kind font */

  /* Body */
  --fs-body-lg: clamp(16px, 1.4vw, 18px); /* @kind font */
  --fs-body:    16px;                   /* @kind font */
  --fs-body-sm: 14px;                   /* @kind font */
  --fs-caption: 13px;                   /* @kind font */  /* dense table/card text — print & slides */

  /* Small labels */
  --fs-eyebrow: 13px;                   /* @kind font */  /* .eyebrow: Lato 700, sentence case, no "//" */
  --fs-micro:   12px;                   /* @kind font */  /* minimum UI text size */

  /* App-Skala (hivefour-ui, fest, nicht fließend). --fs-h1…h4 und -fixed sind Marketing/Druck - nie in der App. */
  --fs-app-title:   32px;  /* @kind font */  /* Seitentitel, Notiztitel - 700 */
  --fs-app-area:    24px;  /* @kind font */  /* Bereichstitel - 900 */
  --fs-app-section: 20px;  /* @kind font */  /* Abschnitt, Kartenüberschrift - 900 */
  --fs-app-read:    16px;  /* @kind font */  /* Notiztext, Lesefläche */
  --fs-app-ui:      14px;  /* @kind font */  /* Tabellen, Listen, Formulare */

  /* Weights */
  --fw-light:   300;                    /* @kind font */
  --fw-regular: 400;                    /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   900;  /* @kind font */

  /* Line-heights */
  --lh-display: 1.05;                   /* @kind font */
  --lh-heading: 1.1;                    /* @kind font */
  --lh-body:    1.55;                   /* @kind font */
  --lh-body-lg: 1.65;                   /* @kind font */

  /* Tracking */
  --ls-display: -0.02em;                /* @kind font */
  --ls-eyebrow: 0;  /* @kind font */  /* sentence case, no tracking (was .18em mono caps) */
}

/* Shinefour — Spacing
   App (hivefour-ui): 4 (nur innerhalb einer Komponente), 8, 12, 16, 24, 32, 48.
   80/96 nur Login, Demo, Marketing. Verboten: 20 und krumme Werte (6, 10, 14, 18 …). */

:root {
  --space-2xs: 4px;    /* sub-grid: intra-label nudge ONLY (label→value, role line) */
  --space-xs:  8px;    /* intra-element: eyebrow→heading, tag gap */
  --space-s:   12px;   /* App: dichte Tabellen, Listen, Formulare */
  --space-sm:  16px;   /* heading→content */
  --space-md:  24px;   /* between components, card-internal */
  --space-ml:  32px;   /* App: zwischen Gruppen auf einer Seite */
  --space-lg:  48px;   /* section-internal groups */
  --space-xl:  80px;   /* standard section padding */
  --space-2xl: 96px;   /* large section padding (hero, cover) */

  /* short aliases (mirror the website tokens) */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  80px;
  --sp-2xl: 96px;

  /* Editorial 14-column grid */
  --grid-cols: 14;        /* @kind other */
  --grid-max:  1320px;    /* @kind spacing */
  --grid-gutter: 24px;    /* @kind spacing */
}

/* Shinefour — Radius, Shadows, Motion
   Buttons/inputs/cards: 8px. Never 50% (no round buttons). No glassmorphism. */

:root {
  /* Radius */
  --r-sm:   4px;    /* small inner elements */
  --r-md:   8px;    /* buttons, cards, inputs — THE STANDARD */
  --r-lg:   12px;   /* large cards, modals */
  --r-pill: 999px;  /* chips, badges only */

  /* Shadows — low, cool, indigo-tinted. No diffuse glows. */
  --sh-card:  0 1px 2px rgba(15,11,77,.04);
  --sh-hover: 0 4px 16px rgba(15,11,77,.08);
  --sh-pop:   0 12px 32px rgba(15,11,77,.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --fast: 140ms;   /* @kind other */
  --med:  240ms;   /* @kind other */
}