/* ============================================================
   DOEL DIGITAL — design tokens
   Rebuilt 1:1 on reference inthebrandlab.com (structure, type,
   layout, motion). Colors = DOEL blue family (brand anchored).
   display+body: Inter · outlier: Geist Mono (ref: Inter + ui-monospace)
   Dark-only, like reference.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- colour · DOEL blue family on black (ref: black + teal flow) ----
     fallback (first line) = iOS Safari <15.4 / old engines that lack oklch() */
  --bg-hero:      #000000;
  --bg-hero:      oklch(0% 0 0);
  --bg-work:      #000000;
  --bg-work:      oklch(0% 0 0);
  --bg-navy-deep: #101a2e;
  --bg-navy-deep: oklch(18% 0.045 262);
  --bg-navy:      #0d1526;
  --bg-navy:      oklch(14.5% 0.04 264);
  --bg-blue:      #1f4c8f;
  --bg-blue:      oklch(41% 0.10 255);
  --bg-blue-card: #2f5ca0;
  --bg-blue-card: oklch(47% 0.11 255);

  --ink:        #f8fafc;
  --ink:        oklch(98% 0.002 240);
  --muted:      rgba(248, 250, 252, 0.65);
  --muted:      oklch(98% 0.002 240 / 0.65);
  --faint:      rgba(248, 250, 252, 0.40);
  --faint:      oklch(98% 0.002 240 / 0.40);
  --line:       rgba(248, 250, 252, 0.12);
  --line:       oklch(98% 0.002 240 / 0.12);
  --line-soft:  rgba(248, 250, 252, 0.20);
  --line-soft:  oklch(98% 0.002 240 / 0.20);

  --accent:       #3b70e5;
  --accent:       oklch(62% 0.17 252);
  --accent-ink:   #f8fafc;
  --accent-ink:   oklch(98% 0.002 240);
  --accent-bright: #8ab4f8;
  --accent-bright: oklch(75% 0.14 248);
  --accent-glow:  rgba(59, 112, 229, 0.30);
  --accent-glow:  oklch(62% 0.17 252 / 0.30);
  --accent-glow-soft: rgba(59, 112, 229, 0.12);
  --accent-glow-soft: oklch(62% 0.17 252 / 0.12);
  --focus:        #6f97ef;
  --focus:        oklch(70% 0.17 252);

  --success: #5ecf8f;
  --success: oklch(72% 0.12 150);
  --error:   #e8606a;
  --error:   oklch(68% 0.16 25);

  /* ---- typography ---- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;

  /* ---- type scale · per reference (5xl–8xl headlines, leading ~1.05) ---- */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);

  /* ---- space ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- rules & radius (ref: rounded-full pills, rounded-2xl cards) ---- */
  --rule-1: 1px;
  --rule-2: 2px;
  --radius-pill: 999px;
  --radius-2xl: 1rem;

  /* ---- z ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}