/* ============================================================
   Design tokens — the single global setting for this page.
   Official Column values via refero.design
   (design/column-style-reference.md is the source of truth).

   RULE: modules never invent values. Type sizes, colors, radii,
   spacing, line-heights and tracking all come from here, so
   changing one variable re-skins every module at once.
   ============================================================ */
:root {
  /* ---- Official palette (raw, do not use directly in modules) ---- */
  --color-indigo-navy: #111a4a;
  --color-midnight-ink: #011821;
  --color-slate-ink: #3b3e47;
  --color-steel: #7c7f88;
  --color-fog: #a9acb6;
  --color-mist: #cbcccf;
  --color-silver-lining: #e3e4e8;
  --color-cloud-canvas: #f6f6f8;
  --color-pure-white: #ffffff;
  --color-charcoal: #232730;
  --color-obsidian: #12161e;
  --color-signal-orange: #ec652b;
  --color-peach-glow: #f2936b;
  --color-seafoam-600: #44b48b;
  --color-seafoam-700: #167e6c;
  --color-seafoam-400: #94efb7;
  --color-deep-sea: #023247;
  --color-sky-cyan: #88deeb;
  --color-cobalt-edge: #1e4199;
  --color-ocean-depth: #0c6997;

  /* ---- Core aliases ---- */
  --navy: var(--color-indigo-navy);
  --seafoam: var(--color-seafoam-600);
  --seafoam-dark: var(--color-seafoam-700);
  --seafoam-light: var(--color-seafoam-400);
  --orange: var(--color-signal-orange);          /* signal only, max 1×/page */

  /* ---- Navy scale (dark canvases, deep gradients) ---- */
  --surface-black: #05060f;   /* deepest gradient stop only */
  --navy-950: #0b1235;
  --navy-900: #0d1b4d;
  --navy-800: #1a2560;
  --navy-700: #27337a;
  --navy-600: #3b49a0;

  /* ---- Standard customization accents — the four hero hue families.
     These are the ONLY accent colors a module may use. Each has
     light / soft / base / mid / deep stops. ---- */
  --accent-green-light: var(--color-seafoam-400);
  --accent-green-soft: #6dd6ae;
  --accent-green: var(--color-seafoam-600);
  --accent-green-deep: var(--color-seafoam-700);
  --accent-green-dark: #0a2e26;

  --accent-blue-light: #a8cdf5;
  --accent-blue-soft: #6ec3e8;
  --accent-blue: #4575cd;
  --accent-blue-mid: #2f6bde;
  --accent-blue-deep: #1f4082;
  --accent-blue-dark: #01202b;

  --accent-gold-light: #f8e496;
  --accent-gold: #f0b23c;
  --accent-gold-deep: #b07622;
  --accent-gold-dark: #3a1d0e;

  --accent-lilac-light: #d8ccf8;
  --accent-lilac-soft: #b79df2;
  --accent-lilac: #9f7aee;
  --accent-lilac-mid: #7a5cd6;
  --accent-lilac-deep: #5e44a5;
  --accent-lilac-dark: #2b1a52;

  /* ---- Two further Column families, so sections have more hues to
     rotate through than green/blue/gold/lilac alone. ---- */
  --accent-cyan-light: #c1e8ef;
  --accent-cyan-soft: #88deeb;
  --accent-cyan: #2f8fc5;
  --accent-cyan-mid: #0c6997;
  --accent-cyan-deep: #023247;
  --accent-cyan-dark: #011821;

  --accent-magenta-light: #e5c9eb;
  --accent-magenta-soft: #c977d1;
  --accent-magenta: #ab4bb1;
  --accent-magenta-mid: #771c86;
  --accent-magenta-deep: #541065;
  --accent-magenta-dark: #2a0238;

  /* ---- Section accent.
     Column gives every section its own hue: the eyebrow tick, the rule,
     the dot art and the active tab all read from one family. A section
     declares which one with data-accent; modules inside only ever say
     var(--accent-*), never a family name. Default is seafoam. ---- */
  --accent-light: var(--accent-green-light);
  --accent-soft: var(--accent-green-soft);
  --accent-base: var(--accent-green);
  --accent-deep: var(--accent-green-deep);
  --accent-rgb: 68, 180, 139;        /* for canvas tints and alpha fills */

  /* ---- Grays ---- */
  --gray-25: #fafbfc;
  --gray-50: var(--color-cloud-canvas);
  --gray-75: #eef0f3;
  --gray-100: var(--color-silver-lining);
  --gray-200: var(--color-silver-lining);
  --gray-300: var(--color-mist);
  --gray-400: var(--color-fog);
  --gray-500: var(--color-steel);
  --gray-600: #4b5169;
  --gray-700: var(--color-slate-ink);

  --bg: var(--color-cloud-canvas);
  --ink: var(--color-indigo-navy);
  --ink-soft: var(--color-slate-ink);

  /* ---- Type ---- */
  --font-sans: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  /* testimonial voice — editorial serif, always italic */
  --font-quote: 'Newsreader', 'Iowan Old Style', Georgia, serif;

  /* one scale, seven tiers — h1…h5 inherit these automatically */
  --text-stat: clamp(72px, 8vw, 118px);      /* hero-grade numbers only */
  --text-display: clamp(40px, 5vw, 60px);    /* page hero */
  --text-h1: clamp(34px, 4.2vw, 52px);       /* section hero */
  --text-h2: clamp(30px, 3.6vw, 44px);       /* module title */
  --text-h3: clamp(24px, 2.8vw, 34px);       /* sub-module title */
  --text-h4: clamp(20px, 2.2vw, 26px);       /* big card title */
  --text-h5: 21px;                           /* card title */
  --text-h6: 17px;                           /* feature label */
  --text-label: 14px;                        /* label-tier headings */
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;

  --lh-display: 1.1;      /* display / h1 / h2 */
  --lh-heading: 1.2;      /* h3 / h4 */
  --lh-title: 1.3;        /* h5 / h6 */
  --lh-body: 1.55;
  --lh-relaxed: 1.65;     /* long-form paragraphs */

  --track-display: -0.03em;   /* display / h1 / h2 */
  --track-heading: -0.02em;   /* h3…h6 */
  --track-tight: -0.01em;     /* lead paragraphs, big numbers in UI */

  /* ---- Geometry ---- */
  --radius-xs: 4px;       /* chips, bars, tiny marks */
  --radius: 8px;          /* official: buttons, inputs, tiles */
  --radius-lg: 12px;      /* cards */
  --radius-xl: 16px;      /* panels, banners */
  --radius-2xl: 24px;     /* hero-grade surfaces */
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --section-gap-xs: 24px;  /* module butts against the next one */
  --section-gap-sm: 40px;  /* tight pairing */
  --section-gap: 72px;     /* default vertical rhythm between modules */
  --section-gap-lg: 96px;  /* closing statements */
  --section-gap-xl: 110px; /* needs headroom for hover/3D overflow */
  --page-pad: 32px;       /* content column side padding */
  --page-max: 1200px;
  --card-pad: 24px;
  --card-pad-lg: 32px;
  --gap-grid: 24px;       /* between cards in a grid */
  --gap-col: 56px;        /* between the two halves of a split module */

  /* ---- Shadows (official) ---- */
  --shadow-sm: rgba(18, 22, 30, 0.024) 0px 1px 4px 0px, rgba(18, 22, 30, 0.05) 0px 1px 0px 0px,
               rgba(18, 22, 30, 0.024) 0px 0px 0px 1px;
  --shadow-md: rgba(17, 26, 74, 0.05) 0px 8px 16px 0px, rgba(17, 26, 74, 0.05) 0px 4px 8px 0px;
  --shadow-lg: rgba(17, 26, 74, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px,
               rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset;
  --shadow-xl: rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px,
               rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px,
               rgba(0, 0, 0, 0.07) 0px 3px 2px 0px;
  --shadow-widget: rgba(30, 30, 44, 0.15) 24px 48px 64px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset;
  --shadow-btn: rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px,
                rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 450ms;
  --dur-slow: 750ms;
}

/* ============================================================
   Section accent families.

   Put data-accent on any section (or any wrapper) and everything
   inside re-tints: eyebrow tick, hairlines, dot art, active tabs.
   This is what gives a Column page its variety — the layout stays
   constant, the hue rotates section to section.
   ============================================================ */
[data-accent="green"] {
  --accent-light: var(--accent-green-light);
  --accent-soft: var(--accent-green-soft);
  --accent-base: var(--accent-green);
  --accent-deep: var(--accent-green-deep);
  --accent-rgb: 68, 180, 139;
}
[data-accent="blue"] {
  --accent-light: var(--accent-blue-light);
  --accent-soft: var(--accent-blue-soft);
  --accent-base: var(--accent-blue);
  --accent-deep: var(--accent-blue-deep);
  --accent-rgb: 69, 117, 205;
}
[data-accent="cyan"] {
  --accent-light: var(--accent-cyan-light);
  --accent-soft: var(--accent-cyan-soft);
  --accent-base: var(--accent-cyan);
  --accent-deep: var(--accent-cyan-mid);
  --accent-rgb: 47, 143, 197;
}
[data-accent="gold"] {
  --accent-light: var(--accent-gold-light);
  --accent-soft: var(--accent-gold-light);
  --accent-base: var(--accent-gold);
  --accent-deep: var(--accent-gold-deep);
  --accent-rgb: 240, 178, 60;
}
[data-accent="lilac"] {
  --accent-light: var(--accent-lilac-light);
  --accent-soft: var(--accent-lilac-soft);
  --accent-base: var(--accent-lilac);
  --accent-deep: var(--accent-lilac-deep);
  --accent-rgb: 159, 122, 238;
}
[data-accent="magenta"] {
  --accent-light: var(--accent-magenta-light);
  --accent-soft: var(--accent-magenta-soft);
  --accent-base: var(--accent-magenta);
  --accent-deep: var(--accent-magenta-mid);
  --accent-rgb: 171, 75, 177;
}
/* On dark canvases the deep stop disappears — lift every role a rung. */
.section-dark[data-accent],
[data-accent].section-dark {
  --accent-deep: var(--accent-light);
}