/*
 * heramind-tokens.css  (voorstel v0.2, 29 oktober 2026)
 * Status: NOG NIET CANONIEK OPGESLAGEN. Concept voor Fable; niets hiervan staat in een productbron.
 * Bron en onderbouwing: concepts/rework-analyse/gereedheid/ontwerpsysteem-en-assets.md
 *
 * v0.2 tegenover v0.1: alle namen buiten de Tailwind-4-namespaces (--text-*, --font-*, --leading-*, --tracking-*,
 * --ease-*, --radius-*, --shadow-*) en buiten bestaande variabelen (--accent, --border, --wrap, --hm-*).
 * Gemeten met proefbouw/tokens/tw-proef.mjs: 0 botsingen met de gecompileerde globals.css van E57.
 *
 * Gebruik
 *   Heramind (Next.js 16, Tailwind 4.3):  src/styles/heramind-tokens.css, als derde @import in src/app/globals.css
 *                                          (na "tailwindcss" en "tw-animate-css"). Bestaande namen (--ink, --violet,
 *                                          ...) worden daarna aliassen naar --core-*.
 *   Merkfamilie (statische site):          site/family/family-tokens.css, byte-gelijk aan dit bestand, als eerste
 *                                          stylesheet in elke merkpagina (FL-040).
 *   Merklaag:                              data-family-brand="heramind|rechtstreeks|nappy-dappy|shelters-of-grace".
 *                                          De familiegateway zet dit attribuut al op <html> (family-i18n/server.cjs:29,
 *                                          live gemeten); heramind.com moet het zelf zetten in src/app/[lang]/layout.tsx.
 *
 * Regels
 *   - Hera in ink, mind in violet. Op donker: Hera in off-white, mind in --core-violet-on-dark.
 *   - De signaallijn is alleen een dunne accentlijn (3 px), nooit een achtergrond of tekstkleur.
 *   - Marketing op off-white; productschermen van Heramind op ink of navy; kleur in product alleen voor betekenis.
 *   - Tekst in een accentkleur gebruikt altijd de "-text"- of "-strong"-variant (AA, gemeten).
 *   - Iconen zijn inline SVG met currentColor; geen tekens als pijl of vinkje.
 */

:root {
  /* 1. Kernpalet Heramind (waarden uit E57 globals.css :root regel 57-71, gemeten) */
  --core-ink: #08111f;
  --core-navy: #101a33;
  --core-offwhite: #f7f4ef;
  --core-white: #ffffff;
  --core-mist: #e7eaf0;
  --core-line: #e2e0da;
  --core-sub: #4a5568;
  --core-violet: #6d28d9;
  --core-violet-bright: #7c3aed;
  --core-violet-on-dark: #a78bfa;
  --core-violet-wash: #f3eefc;
  --core-blue: #2563eb;
  --core-teal: #14b8a6;
  --core-orange: #ff6b2c;
  --core-amber: #f5a524;
  --core-red: #e5484d;
  --core-magenta: #e0218a;

  /* Tekstveilige varianten (contrast gemeten met check-tokens.mjs) */
  --core-teal-text: #0f766e;    /* 5,47:1 op wit */
  --core-orange-text: #c2410c;  /* 4,72:1 op off-white */
  --core-red-text: #b42318;     /* 5,99:1 op off-white */

  /* Signaallijn: violet, blauw, teal, oranje (besluit E2: eindkleur #ff6b2c of #f59e0b) */
  --signal-line: linear-gradient(90deg, var(--core-violet) 0%, var(--core-blue) 38%, var(--core-teal) 70%, var(--core-orange) 100%);
  --signal-height: 3px;
  --signal-width: 120px;

  /* 2. Rollen */
  --surface-marketing: var(--core-offwhite);
  --surface-card: var(--core-white);
  --surface-product: var(--core-ink);
  --surface-product-raised: var(--core-navy);
  --fg: var(--core-ink);
  --fg-muted: var(--core-sub);
  --fg-on-product: var(--core-offwhite);   /* 15,72:1 op navy */
  --fg-muted-on-product: #aeb8cb;          /* 9,47:1 op ink */
  --hairline: var(--core-line);
  --hairline-on-product: rgb(231 234 240 / 0.12);
  --focus-ring: var(--core-violet-bright);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --wordmark-hera: var(--core-ink);
  --wordmark-mind: var(--core-violet);
  --wordmark-hera-on-dark: var(--core-offwhite);
  --wordmark-mind-on-dark: var(--core-violet-on-dark);

  /* Betekeniskleuren product (HI-009): altijd met icoon of tekst, nooit alleen kleur */
  --status-ok: var(--core-teal);
  --status-ok-text: var(--core-teal-text);
  --status-attention: var(--core-orange);
  --status-attention-text: var(--core-orange-text);
  --status-risk: var(--core-red);
  --status-risk-text: var(--core-red-text);
  --status-dispute: var(--core-violet);

  /* 3. Typografie (besluit E1: Heramind blijft systeemletter of gaat naar Manrope) */
  --type-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --type-brand: "Manrope", "Segoe UI", system-ui, sans-serif;
  --type-serif: "Newsreader", Georgia, serif;
  --type-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  --type-zh: "FamilyChinese", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;

  --fs-xs: 0.75rem;                                   /* 12 px: ondergrens voor leesbare tekst */
  --fs-sm: 0.875rem;                                  /* 14 px */
  --fs-md: 1rem;                                      /* 16 px, body */
  --fs-lg: 1.125rem;                                  /* 18 px, lead */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20-24 px, h3 */
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);  /* 28-40 px, h2 */
  --fs-3xl: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);   /* 34-60 px, sectiekop (concept MC:190) */
  --fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.875rem); /* 40-78 px, hero h1 */
  --lh-body: 1.65;
  --lh-snug: 1.3;
  --lh-tight: 1.02;
  --ls-display: -0.04em;
  --ls-heading: -0.03em;
  --ls-eyebrow: 0.14em;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* 4. Ruimte en maatvoering (4 px-raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(16px, 4vw, 32px);
  --page-wrap-narrow: 760px;
  --page-wrap: 1180px;
  --page-wrap-wide: 1320px;
  --control-height: 52px;
  --control-height-sm: 44px;   /* minimaal aanraakdoel */

  /* 5. Hoeken */
  --corner-xs: 6px;
  --corner-sm: 10px;
  --corner-md: 14px;
  --corner-lg: 20px;
  --corner-xl: 26px;
  --corner-pill: 999px;
  --corner-round: 50%;
  --brand-corner: var(--corner-lg);

  /* 6. Diepte (tint per merk via --brand-shadow-rgb, RGB-kanalen) */
  --brand-shadow-rgb: 8 17 31;
  --elev-1: 0 1px 2px rgb(var(--brand-shadow-rgb) / 0.04);
  --elev-2: 0 10px 30px -12px rgb(var(--brand-shadow-rgb) / 0.30);
  --elev-3: 0 24px 50px -34px rgb(var(--brand-shadow-rgb) / 0.40);
  --elev-4: 0 40px 80px -40px rgb(var(--brand-shadow-rgb) / 0.35);
  --elev-ring: 0 0 0 1px var(--hairline);

  /* 7. Beweging (meest gebruikte waarden plus het motion-concept) */
  --dur-instant: 120ms;
  --dur-fast: 200ms;      /* kleur, achtergrond, rand */
  --dur-base: 350ms;      /* hover-transform, lift */
  --dur-slow: 550ms;      /* veegvulling in knop, pijl die wegschiet */
  --dur-reveal: 950ms;    /* tekst die opkomt (eenmalig) */
  --dur-draw: 1200ms;     /* signaallijn tekent (eenmalig) */
  --curve-enter: cubic-bezier(0.16, 1, 0.3, 1);   /* concept --ease-out, HM 33x, ND 7x */
  --curve-move: cubic-bezier(0.7, 0, 0.2, 1);     /* concept --ease-io: wipe, veeg, deur */
  --curve-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* RT, SoG, familie */
  --stagger-word: 55ms;
  --stagger-block: 90ms;
  /* Budgetten uit de masterplannen (bindend) */
  --budget-route: 400ms;          /* HP-012, HP-112 */
  --budget-route-crossfade: 200ms;/* RT-096 */
  --budget-brand-switch: 600ms;   /* FL-061: cirkel 320 ms + merkteken 180 ms */
  --budget-hero-entrance: 1700ms; /* SG-036, eenmalig per sessie */

  /* 8. Lagen */
  --z-header: 50;
  --z-dialog: 57;
  --z-transition: 60;
}

/* Beweging uit: systeemvoorkeur en de ene schakelaar (FL-047, HP-117, RT-097) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --dur-draw: 0ms;
    --stagger-word: 0ms; --stagger-block: 0ms;
  }
}
:root[data-motion="off"] {
  --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --dur-draw: 0ms;
  --stagger-word: 0ms; --stagger-block: 0ms;
}

/* 9. Merklagen: alleen variabelen, geen opmaak */
[data-family-brand="heramind"] {
  --brand-accent: var(--core-violet);
  --brand-accent-strong: var(--core-violet);  /* wit erop 7,10:1 */
  --brand-accent-text: var(--core-violet);    /* 6,48:1 op off-white */
  --brand-ink: var(--core-ink);
  --brand-paper: var(--core-offwhite);
  --brand-white: var(--core-white);
  --brand-wash: var(--core-violet-wash);
  --brand-muted: var(--core-sub);
  --brand-line: var(--core-line);
  --brand-type: var(--type-ui);
  --brand-type-display: var(--type-ui);
  --brand-corner: var(--corner-lg);
  --brand-shadow-rgb: 8 17 31;
}

[data-family-brand="rechtstreeks"] {
  --brand-accent: #f05a28;                    /* alleen vlakken en grote tekst (3,03:1 op paper) */
  --brand-accent-strong: #ad4e19;             /* knopvlak met witte tekst: 5,32:1 */
  --brand-accent-text: #ad4e19;               /* 4,84:1 op paper */
  --brand-ink: #22251f;
  --brand-paper: #f5f2eb;
  --brand-white: #fffdf8;
  --brand-wash: #dfe4d0;
  --brand-muted: #62665d;
  --brand-line: #d9d8cf;
  --brand-moss: #d8dccb;
  --brand-forest: #35482f;                    /* --mb-forest, 15x in rechtstreeks/*.css */
  --brand-type: var(--type-brand);
  --brand-type-display: var(--type-brand);
  --brand-corner: 24px;
  --brand-shadow-rgb: 34 37 31;
}

[data-family-brand="nappy-dappy"] {
  --brand-accent: #ff8400;                    /* op paars 5,55:1; nooit als tekst op cream (2,36:1) */
  --brand-accent-strong: #b25400;             /* wit erop 5,05:1 */
  --brand-accent-text: #b25400;               /* 4,86:1 op cream */
  --brand-ink: #46007a;
  --brand-deep: #2c0b40;
  --brand-paper: #fffaf2;
  --brand-white: #ffffff;
  --brand-wash: #eee3f5;
  --brand-muted: #68556e;
  --brand-line: #daccdf;
  --brand-peach: #ffe3c3;
  --brand-type: var(--type-brand);
  --brand-type-display: var(--type-serif);
  --brand-corner: 26px;
  --brand-shadow-rgb: 70 0 122;
}

[data-family-brand="shelters-of-grace"] {
  --brand-accent: #9a4f38;                    /* klei: 5,34:1 op cream, wit erop 5,82:1 */
  --brand-accent-strong: #9a4f38;
  --brand-accent-text: #9a4f38;
  --brand-gold: #ebc278;                      /* alleen op groen of als decor */
  --brand-honey: #b5802f;                     /* alleen decor of grote tekst (3,11:1 op cream) */
  --brand-ink: #173e35;
  --brand-paper: #f7f3e9;
  --brand-white: #fffdf7;
  --brand-wash: #e1e7d9;
  --brand-muted: #526458;
  --brand-line: #d6d9c9;
  --brand-type: var(--type-brand);
  --brand-type-display: var(--type-serif);
  --brand-corner: 20px;
  --brand-corner-fold: 64px 12px 64px 12px;   /* bestaand --fold in shelters-of-grace/style.css */
  --brand-corner-door: 280px 280px 22px 22px; /* doelvorm deur (SG-036); live .hero-image is nu 170px 14px 100px 14px */
  --brand-shadow-rgb: 23 62 53;
}