/* ============================================================
   oranjekans.nl — Design tokens  ("Oranje Premium Dark")
   Single source of truth for the whole UI. Do not hard-code
   colors/spacing elsewhere — reference these custom props.
   ============================================================ */
:root {
  /* ── Base / surfaces (graphite near-black) ── */
  --c-bg:          #0C0D10;   /* canvas */
  --c-surface-1:   #14161C;   /* sections */
  --c-surface-2:   #1C1F27;   /* cards */
  --c-surface-3:   #232733;   /* raised / hover */
  --c-hairline:    #2A2F3A;   /* borders 1px */

  /* ── Brand accent (Dutch oranje) — the only "hot" color ── */
  --c-accent:      #FF6A00;
  --c-accent-600:  #FF8326;   /* hover */
  --c-accent-700:  #E55600;   /* pressed */
  --c-accent-soft: rgba(255,106,0,.12);
  --c-accent-glow: rgba(255,106,0,.28);

  /* ── Trust / secondary (muted amber — KSA, license, awards) ── */
  --c-trust:       #E8B65A;
  --c-trust-soft:  rgba(232,182,90,.12);

  /* ── Text ── */
  --c-text:        #F4F5F7;
  --c-text-2:      #A2A8B4;
  --c-text-muted:  #8B93A1;
  --c-on-accent:   #1A0E00;

  /* ── Semantic ── */
  --c-success:#2FBF71; --c-success-soft:rgba(47,191,113,.14);
  --c-warning:#E8B65A; --c-warning-soft:rgba(232,182,90,.14);
  --c-danger: #E5484D; --c-danger-soft: rgba(229,72,77,.14);

  /* ── Typography ── */
  --font-display:"Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.25rem;
  --fs-xl:1.563rem; --fs-2xl:1.953rem; --fs-3xl:2.441rem; --fs-4xl:3.052rem;
  --fs-hero:clamp(2.4rem, 6vw, 4.6rem);
  --lh-tight:1.1; --lh-snug:1.3; --lh-base:1.65;
  --tracking-tight:-0.02em; --tracking-wide:0.08em;

  /* ── Spacing (8px grid, 4px micro) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ── Radius ── */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:9999px;

  /* ── Elevation (3 levels + glow) ── */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 24px rgba(0,0,0,.45);
  --sh-3:0 20px 60px rgba(0,0,0,.55);
  --sh-glow:0 0 0 1px var(--c-accent), 0 8px 32px var(--c-accent-glow);

  /* ── Motion ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-ui:180ms; --dur-reveal:500ms;

  /* ── Layout ── */
  --container:1200px;
  --container-narrow:760px;
  --header-h:68px;
  --z-header:100; --z-drawer:200; --z-cookie:300; --z-modal:400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-ui:0ms; --dur-reveal:0ms; }
}