/* ================================================================
   NeoDemos Design Tokens — Derived from Canva dark green + beige
   Color source: design/canva_designs/ SVG templates
   - Primary dark green: #042825 (Corporate Report template)
   - Beige surface: #f4efe5 / #e8e3db (Charity Gala template)
   - Orange accent: #ff751f (NeoDemos logo SVG)
   ================================================================ */

/* Self-hosted fonts (variable) */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/static/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/static/fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@theme {
  /* === Colors (from Canva dark green #042825 + beige #f4efe5 + logo orange #ff751f) === */
  --color-primary: #042825;
  --color-primary-hover: #031f1d;
  --color-primary-light: #d4e8e6;
  --color-secondary: #0a3d38;
  --color-accent: #ff751f;
  --color-accent-hover: #e5671b;
  --color-accent-ink: #b45316;        /* accent as TEXT (<24px) & focus rings — 4.6:1 on cream/white; #ff751f stays fill/display */
  --color-accent-ink-hover: #9d4913;
  --color-accent-light: #fff0e6;
  --color-surface: #f7f4ef;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #efe9e0;
  --color-border: #ddd5ca;
  --color-border-strong: #c8bfb2;
  --color-border-input: #928b82;      /* form-control borders — 3:1 (WCAG 1.4.11); border/border-strong stay decorative */
  --color-text: #1a1f1e;
  --color-text-secondary: #5a6664;
  --color-text-tertiary: #6a716f;     /* WCAG-audit jul 2026: was #8b9492 (2.8:1) */
  --color-success: #2D7A4F;
  --color-success-light: #E8F5EE;
  --color-warning: #93671d;           /* WCAG-audit jul 2026: was #9A6C1E (4.2:1 on warning-light) */
  --color-warning-light: #FDF4E3;
  --color-error: #C23A3A;
  --color-error-light: #FDE8E8;

  /* === Typography === */
  --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* === Spacing (4px base; gaps filled Phase 7+) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Font size scale (Oatmeal-aligned: 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48) === */
  --font-size-xs: 0.75rem;   /* 12px — micro labels */
  --font-size-sm: 0.875rem;  /* 14px — small text, chips */
  --font-size-base: 1rem;    /* 16px — body */
  --font-size-lg: 1.125rem;  /* 18px — lead */
  --font-size-xl: 1.25rem;   /* 20px — small section heads */
  --font-size-2xl: 1.5rem;   /* 24px — h3 */
  --font-size-3xl: 1.875rem; /* 30px — h2 */
  --font-size-4xl: 2.25rem;  /* 36px — feature heads */
  --font-size-5xl: 3rem;     /* 48px — h1 display */
  --font-size-6xl: 3.75rem;  /* 60px — hero */

  /* === Line heights (single source — design-system aligned) === */
  --line-height-tight: 1.15;    /* display serif */
  --line-height-snug: 1.3;      /* compact headings */
  --line-height-normal: 1.5;    /* dense UI rows */
  --line-height-body: 1.6;      /* body copy */
  --line-height-relaxed: 1.75;  /* long-form prose / AI content */
  --line-height-loose: 2;       /* extra-open */

  /* === Letter spacing === */
  --letter-spacing-display: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-widest: 0.08em;

  /* === Semantic type roles (font shorthand: weight size/line-height family) === */
  --display: 400 var(--font-size-6xl)/var(--line-height-tight) var(--font-heading);
  --h1:      400 var(--font-size-5xl)/var(--line-height-tight) var(--font-heading);
  --h2:      400 var(--font-size-3xl)/var(--line-height-snug)  var(--font-heading);
  --h3:      400 var(--font-size-2xl)/var(--line-height-snug)  var(--font-heading);
  --h4:      600 var(--font-size-xl)/var(--line-height-snug)   var(--font-body);
  --lead:    400 var(--font-size-lg)/var(--line-height-body)   var(--font-body);
  --body:    400 var(--font-size-base)/var(--line-height-body) var(--font-body);
  --small:   400 var(--font-size-sm)/var(--line-height-body)   var(--font-body);
  --eyebrow: 600 var(--font-size-xs)/1.2 var(--font-body);
  --code:    400 var(--font-size-sm)/var(--line-height-body) var(--font-mono);

  /* === Type v2 — T1 sans display (2026-07-30, Dennis+Claudia akkoord) ===
     Display voice moves to bold Inter with the orange brand period on page
     titles. The serif roles ABOVE are deliberately retained: (a) as the
     revert path, (b) for the four editorial serif slots that stay serif —
     L1 focus statement, pull-quotes/blockquotes, calendar date numerals,
     brand wordmark. Decision + revert recipe:
     docs/design/TYPE_SYSTEM_V2_2026-07-30.md. Additive only. */
  --display-2: 800 clamp(2.25rem, 1.8rem + 1.8vw, 3rem)/1.08 var(--font-body);
  --h1-2:      800 clamp(2rem, 1.6rem + 1.4vw, 2.6rem)/1.12 var(--font-body);
  --h2-2:      800 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1.15 var(--font-body);
  --h3-2:      700 var(--font-size-xl)/var(--line-height-snug) var(--font-body);
  --letter-spacing-display-2: -0.035em;

  /* === Z-index scale === */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-nav: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* === Container max-width (Oatmeal 80rem / 1280px) === */
  --container-xs: 20rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 72rem;
  --container-2xl: 80rem;
  --content-max: 46rem;   /* reading-measure cap (Cockpit R3, BUILD_INSTRUCTIONS §3.4) */

  /* === Color: on-dark text + color-mixed borders === */
  --color-text-on-dark: #f7f4ef;
  /* Hover/active wash for controls that sit ON the sunken chrome (nav rail,
     drawers) — sunken-on-sunken is invisible there. Added 2026-07-29
     legibility pass; additive only (house rule: tokens are only-add). */
  --color-chrome-hover: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface-sunken));
  /* Content ground (2026-07-30 material pass). Three-layer surface system:
     chrome = sunken/cream family (navigate), canvas = this warm white (read
     and work), objects = surface-raised white + hairline border (interact).
     Cream --color-surface stays the brand/chrome/tint layer and no longer
     doubles as the reading ground. Additive only. */
  --color-canvas: #fcfaf8;
  --color-border-subtle: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --color-border-strong-mix: color-mix(in oklab, var(--color-primary) 20%, transparent);

  /* === Scrollbars === (applied once on `html` in base.css; both scrollbar
     properties inherit, so every scroll container picks these up) */
  --color-scrollbar-thumb: color-mix(in oklab, var(--color-primary) 22%, transparent);
  --color-scrollbar-thumb-hover: color-mix(in oklab, var(--color-primary) 42%, transparent);
  /* Dark panels (admin rail, code blocks, dossier low-stimulus mode) must
     re-declare `scrollbar-color` — the html-level value is already substituted
     when it inherits, so overriding the custom property alone does nothing. */
  --color-scrollbar-thumb-on-dark: color-mix(in oklab, var(--color-text-on-dark) 28%, transparent);

  /* === Shadows (green-tinted, layered) === */
  --shadow-xs: 0 1px 2px rgba(4,40,37,0.04), 0 1px 3px rgba(4,40,37,0.06);
  --shadow-sm: 0 2px 4px rgba(4,40,37,0.04), 0 4px 8px rgba(4,40,37,0.06);
  --shadow-md: 0 4px 8px rgba(4,40,37,0.04), 0 8px 24px rgba(4,40,37,0.08);
  --shadow-lg: 0 8px 16px rgba(4,40,37,0.06), 0 16px 48px rgba(4,40,37,0.1);
  --shadow-xl: 0 12px 24px rgba(4,40,37,0.08), 0 24px 64px rgba(4,40,37,0.14);

  /* === Border radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* Knopsysteem 2026-07-30: app-knoppen zijn 8px-rechthoeken (desktop-SaaS
     norm: shadcn 6, Stripe 4, Vercel rect); de pill blijft voor chips,
     segmenten, badges en marketing-CTA's (Vercel's 'rounded' opt-in-patroon). */
  --radius-btn: 8px;

  /* === Motion (single source — design-system aligned; see colors_and_type.css
         + preview/motion.html + QA_SPEC hard_rules). Everything animated damps
         under prefers-reduced-motion via base.css. === */
  --dur-1: .12s;   /* micro-feedback: colour, background, border, opacity */
  --dur-2: .15s;   /* small movement: lift, arrow-nudge, toggle, popover-enter */
  --dur-3: .24s;   /* panels: expand/collapse, rails, drawers, tab-swap */
  --dur-4: .3s;    /* screen-enter: page swap, dossier-in, rail-swap */
  --ease: cubic-bezier(.4, 0, .2, 1);        /* standard — everything moving */
  --ease-out: cubic-bezier(.22, .8, .32, 1); /* emphasis: pulses, palette-enter */
}

/* ================================================================
   NeoDemos — semantische tokenlaag, STOA (WS159 fase 5B)
   Additief overgenomen uit docs/design/stoa/spec/TOKENS-SEMANTISCH.css.
   Rolnamen, geen kleurnamen. De waarde mag veranderen zonder rename.
   Collisiecontrole 2026-08-14: geen bestaand --nd-*-token in tokens.css;
   de enige --nd-*-namen elders (--nd-nav-h, --nd-topbar-h in
   pages/shell.css) overlappen niet met deze set.
   Reconciliatie: zie docs/design/stoa/spec/PREWORK-AFSTEMMING.md § 3.
   ================================================================ */
:root{
  /* ── oppervlak ────────────────────────────────────────────── */
  --nd-surface-canvas:#F6F3EC;        /* paginagrond (was --nd-marmer) */
  --nd-surface-raised:#FCFAF5;        /* kaart, leeskolom, invoerveld */
  --nd-surface-sunken:#EAE4D6;        /* zijpaneel, secundaire band */
  --nd-surface-inverse:#121826;       /* donkere band, rail */
  --nd-surface-overlay:rgba(9,13,22,.62);

  /* ── tekst ────────────────────────────────────────────────── */
  --nd-text-strong:#211D15;           /* kop, primaire tekst, actief */
  --nd-text-default:#5B5547;          /* lopende tekst */
  --nd-text-muted:#665F50;            /* meta, hulptekst */
  --nd-text-on-inverse:#F1EDE2;
  --nd-text-on-inverse-muted:#ABA695;

  /* ── lijn ─────────────────────────────────────────────────── */
  --nd-border-section:rgba(33,29,21,.28);
  --nd-border-panel:rgba(33,29,21,.14);
  --nd-border-row:rgba(33,29,21,.10);
  --nd-border-subrow:rgba(33,29,21,.08);
  --nd-border-on-inverse:rgba(241,237,226,.16);
  --nd-border-focus:#7A5A08;

  /* ── bewijs: uitsluitend voor herleidbare vindplaatsen ───── */
  --nd-evidence-text:#7A5A08;         /* bronnummer, kenmerk, peildatum */
  --nd-evidence-mark:rgba(240,180,52,.22);   /* markering achter tekst */
  --nd-evidence-rule:#7A5A08;         /* onderstreping van een markering */
  --nd-evidence-spine:#7A5A08;        /* actieve rij in een register */
  --nd-evidence-on-inverse:#D9A544;

  /* ── actie ────────────────────────────────────────────────── */
  --nd-action-fill:#F0B434;
  --nd-action-fill-hover:#DC9A14;
  --nd-action-on-fill:#211D15;        /* 9,02:1 — controleer bij elke wijziging */
  --nd-action-quiet:#211D15;          /* tekstlink met pijl */

  /* ── status: kleur is nooit de enige drager ───────────────── */
  --nd-status-attention:#8F2A21;      /* verlopen, verworpen, ontbrekend */
  --nd-status-attention-on-inverse:#E28B77;
  --nd-status-neutral:#665F50;        /* afgedaan, procedureel */
  --nd-status-open:#211D15;           /* aangenomen, open */

  /* ── typografie ───────────────────────────────────────────── */
  --nd-font-display:'Fraunces',Georgia,serif;
  --nd-font-ui:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  --nd-font-fact:'IBM Plex Mono',ui-monospace,monospace;  /* alleen controleerbare feiten */
  --nd-display-axis-large:'opsz' 144,'wght' 520,'WONK' 1; /* >= 26px */
  --nd-display-axis-small:'opsz' 40,'wght' 560;           /* < 26px */

  /* ── ruimte en vorm ───────────────────────────────────────── */
  --nd-radius-control:4px;
  --nd-radius-panel:6px;
  --nd-radius-card:7px;
  --nd-touch-min:44px;
  --nd-measure-read:74ch;

  /* ── beweging ─────────────────────────────────────────────── */
  --nd-ease-state:cubic-bezier(.16,1,.3,1);   /* toestandswissel */
  --nd-ease-enter:cubic-bezier(.19,1,.22,1);  /* intrede */
  --nd-dur-quick:180ms;
  --nd-dur-state:280ms;
  --nd-dur-enter:800ms;
  --nd-dur-hero:1050ms;
}