/* =========================================================
   Gatekick Labs — Design Tokens
   Single source of truth. Do not override in page CSS;
   reference via var(--token-name).
   ========================================================= */

:root {
  /* ---------- Color: Cool neutral light-mode ---------- */
  --ink-000: #F5F6F8;   /* page background (cool light grey) */
  --ink-050: #ECEDF0;
  --ink-100: #FFFFFF;   /* raised surface (white cards) */
  --ink-200: #F0F1F3;
  --ink-300: #E2E4E9;   /* hairline on light */
  --ink-400: #C1C4CC;
  --ink-500: #71717A;
  --ink-600: #71717A;
  --ink-700: #52525B;
  --ink-800: #3F3F46;
  --ink-900: #111118;   /* primary text */

  /* ---------- Color: Paper scale (inverse / dark — footer) ---------- */
  --paper-000: #111118;
  --paper-100: #222222;
  --paper-200: #2A2A2A;
  --paper-300: #3A3A3A;

  /* ---------- Color: Signal (brand accent — emerald teal from logo) ---------- */
  --signal-500: #48A495;   /* emerald teal — primary accent */
  --signal-400: #5CBCA9;
  --signal-600: #338275;

  --signal-alt-500: #4A57DB; /* cobalt indigo — secondary accent */
  --signal-alt-400: #6471E4;
  --signal-alt-600: #3442B8;

  /* ---------- Semantic ---------- */
  --bg: var(--ink-000);
  --bg-raised: var(--ink-100);
  --bg-inverse: var(--paper-000);

  --fg: var(--ink-900);
  --fg-muted: var(--ink-700);
  --fg-subtle: var(--ink-600);
  --fg-inverse: #ECEEEC;

  --rule: var(--ink-300);
  --rule-strong: var(--ink-400);

  --accent: var(--signal-500);
  --accent-hover: var(--signal-400);
  --accent-2: var(--signal-alt-500);
  --accent-2-hover: var(--signal-alt-400);
  --accent-gradient: linear-gradient(90deg, var(--signal-500) 0%, var(--signal-alt-500) 100%);

  --focus-ring: var(--signal-500);

  /* ---------- Typography ---------- */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid (clamp) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md:   1.0625rem; /* 17 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --text-4xl:  clamp(3rem, 1.6rem + 5.4vw, 6.25rem);   /* hero display */
  --text-5xl:  clamp(2.75rem, 1.6rem + 7vw, 8rem);      /* mega numeral */

  --leading-tight: 1.05;
  --leading-snug:  1.18;
  --leading-normal:1.45;
  --leading-prose: 1.62;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-mono:   0.04em;   /* for monospace labels */

  /* ---------- Spacing 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;
  --space-10: 8rem;
  --space-11: 12rem;

  /* Section vertical rhythm */
  --section-y: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);

  /* ---------- Container widths ---------- */
  --container-sm: 44rem;   /* 704  */
  --container-md: 60rem;   /* 960  */
  --container-lg: 76rem;   /* 1216 */
  --container-xl: 84rem;   /* 1344 */
  --container-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------- Shadows (light-mode appropriate) ---------- */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 4px 24px -8px rgba(0,0,0,0.10);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.15);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 700ms;

  /* ---------- Layout primitives ---------- */
  --hairline: 1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);

  /* ---------- Breakpoints (reference only; used in media queries) ----------
     sm: 480, md: 768, lg: 1024, xl: 1280, 2xl: 1536
  */
}

/* Light theme primary. */