/*
 * DEVKO design tokens — the single source of truth for color, type, space and motion.
 *
 * Official palette (brand sheet): black 50% · white/gray 20% · purple 20% · lime 10%.
 * Contrast rules (verified):
 *   - Lime is an accent for dark and purple surfaces only (18:1 on black, 11.4:1 on purple).
 *     Never use lime text on white (1.14:1).
 *   - Purple is a surface or a text color on light backgrounds; never text on black (1.58:1).
 */

:root {
  /* ---------- Brand primitives ---------- */
  --devko-black: #040303;
  --devko-white: #ffffff;
  --devko-purple: #34246c;
  --devko-lime: #dcff40;

  /* ---------- Derived tones ---------- */
  --ink-950: #040303;
  --ink-900: #0b0912;
  --ink-850: #110e1b;
  --ink-800: #1a1627;
  --ink-700: #2a2438;
  --ink-500: #6b6580; /* control borders on dark (3.58:1) */
  --ink-400: #8c869c; /* labels on dark (5.45:1 on ink-850) */
  --ink-300: #a9a4b8; /* muted text on dark (8.5:1) */

  --purple-950: #150e30;
  --purple-900: #1f1646;
  --purple-800: #2a1d58;
  --purple-700: #34246c;
  --purple-600: #45338a;
  --purple-500: #5a48a8;
  --purple-200: #cfc8ea; /* muted text on purple (8.1:1) */
  --purple-100: #e9e5f7;
  --purple-50: #f5f3fb;

  --paper: #ffffff;
  --paper-2: #f4f3f6;
  --paper-3: #e9e7ee;
  --paper-4: #d6d2de;
  --slate-600: #555063; /* muted text on light (7:1 on paper-2) */

  --lime-300: #ebff8f;
  --lime-400: #e4ff66;
  --lime-500: #dcff40;
  --lime-600: #c6e62e;
  --lime-ink-muted: #3b4214; /* muted text on lime (9.3:1) */

  --danger-300: #ff9b8f; /* errors on dark (9.7:1) */
  --danger-600: #b42318;

  /* Product accents, taken from each product's live site */
  --accent-invetko: #003063;
  --accent-dentis: #00bfa6;
  --accent-dentis-ink: #0f1f3d;
  --accent-cortina: #1a85b5;
  --accent-caelum: #7ef2ff; /* cyan on Caelum navy: 13:1, also safe on DEVKO dark surfaces */
  --accent-caelum-ink: #0d1b3e;
  /* Lighter variants for icons and markers on dark surfaces (≥ 3:1) */
  --accent-invetko-on-dark: #7fb2ee;
  --accent-cortina-on-dark: #4db8e8;

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-label: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.25vw, 2.375rem);
  --fs-h2: clamp(2.125rem, 1.3rem + 3.4vw, 4.375rem);
  --fs-display: clamp(2.75rem, 1.45rem + 5.6vw, 6.75rem);
  --fs-mega: clamp(3rem, 1rem + 8.6vw, 10rem);

  --lh-tight: 1;
  --lh-snug: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --tracking-display: -0.045em;
  --tracking-tight: -0.03em;
  --tracking-label: 0.08em;

  /* ---------- Space (spacious marketing scale, 4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-pad: clamp(4.5rem, 2.4rem + 8vw, 9rem);
  --gutter: clamp(1rem, 0.35rem + 2.7vw, 3rem);
  --container: 80rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layers ---------- */
  --z-raised: 10;
  --z-header: 100;
  --z-skip: 1000;

  --header-h: 4.25rem;
}

@media (max-width: 63.99rem) {
  :root {
    --header-h: 3.75rem;
  }
}

/* ---------- Semantic surfaces ----------
 * Components only read these variables, so any component works on any surface.
 */
.surface-dark {
  --bg: var(--ink-950);
  --bg-raised: var(--ink-850);
  --fg: var(--devko-white);
  --fg-muted: var(--ink-300);
  --fg-subtle: var(--ink-400);
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.24);
  --accent: var(--lime-500);
  --accent-hover: var(--lime-300);
  --accent-ink: var(--devko-black);
  --focus: var(--lime-500);
  color-scheme: dark;
}

.surface-purple {
  --bg: var(--purple-700);
  --bg-raised: var(--purple-800);
  --fg: var(--devko-white);
  --fg-muted: var(--purple-200);
  --fg-subtle: var(--purple-200);
  --line: rgb(255 255 255 / 0.16);
  --line-strong: rgb(255 255 255 / 0.32);
  --accent: var(--lime-500);
  --accent-hover: var(--lime-300);
  --accent-ink: var(--devko-black);
  --focus: var(--lime-500);
  color-scheme: dark;
}

.surface-light {
  --bg: var(--paper);
  --bg-raised: var(--paper-2);
  --fg: var(--devko-black);
  --fg-muted: var(--slate-600);
  --fg-subtle: var(--slate-600);
  --line: var(--paper-3);
  --line-strong: var(--paper-4);
  --accent: var(--purple-700);
  --accent-hover: var(--purple-600);
  --accent-ink: var(--devko-white);
  --focus: var(--purple-700);
  color-scheme: light;
}

.surface-gray {
  --bg: var(--paper-2);
  --bg-raised: var(--paper);
  --fg: var(--devko-black);
  --fg-muted: var(--slate-600);
  --fg-subtle: var(--slate-600);
  --line: var(--paper-4);
  --line-strong: #bfb9cb;
  --accent: var(--purple-700);
  --accent-hover: var(--purple-600);
  --accent-ink: var(--devko-white);
  --focus: var(--purple-700);
  color-scheme: light;
}

.surface-lime {
  --bg: var(--lime-500);
  --bg-raised: var(--lime-400);
  --fg: var(--devko-black);
  --fg-muted: var(--lime-ink-muted);
  --fg-subtle: var(--lime-ink-muted);
  --line: rgb(4 3 3 / 0.2);
  --line-strong: rgb(4 3 3 / 0.4);
  --accent: var(--devko-black);
  --accent-hover: var(--ink-800);
  --accent-ink: var(--lime-500);
  --focus: var(--devko-black);
  color-scheme: light;
}