/* ============================================================================
 * Shinefour Designsystem — Tokens (EINZIGE Fassung, SB-173)
 *
 * HERKUNFT: Claude-Design-Projekt "Shinefour Design System"
 *   314b9728-8385-4eff-9514-ed7cc5ab73cf
 *   -> tokens/colors.css + tokens/typography.css + tokens/spacing.css
 *      + tokens/effects.css, wortgleich zusammengefuehrt.
 *
 * NICHT KOPIEREN. Wer diese Werte braucht, bindet DIESE Datei ein:
 *   - scripts/cockpit/  + scripts/opskonsole/  -> StaticFiles-Mount /designsystem
 *   - shinefour-secondbrain-web-app            -> `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
 * WEBAPP=<pfad>` fuer die Web-App. 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;

  /* ── Pop magenta (very sparingly) ─────────────────────────────── */
  --pop-500: #E879F9;

  /* ── 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-500);
  --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);
}

/* Shinefour — Typography
   Three fonts only: Lato (sans), Instrument Serif (em-accents only, italic),
   JetBrains Mono (eyebrows / captions). Nothing else. */

:root {
  --font-sans:  'Lato', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;   /* ONLY as <em> in H1–H4 */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* 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 */

  /* Mono / utility */
  --fs-eyebrow: 11px;                   /* @kind font */
  --fs-micro:   11px;                   /* @kind font */

  /* 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.18em;  /* @kind font */
}

/* Shinefour — Spacing (8px grid, binding)
   Allowed: 8, 16, 24, 48, 80, 96. Forbidden: 12, 20, 32, 40, 56, 64. */

:root {
  --space-2xs: 4px;    /* sub-grid: intra-label nudge ONLY (label→value, role line) */
  --space-xs:  8px;    /* intra-element: eyebrow→heading, tag gap */
  --space-sm:  16px;   /* heading→content */
  --space-md:  24px;   /* between components, card-internal */
  --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 */
}