/* Design tokens derived from docs/03-brand-visual-identity.md (sampled from the 2026 deck) */
:root {
  /* Palette */
  --color-bone: #e8e7db;
  --color-bone-deep: #d9d8cb;
  --color-plum: #51174c;
  --color-violet: #613eaf;
  --color-oxblood: #781e26;
  --color-navy: #1c174f;
  --color-chartreuse: #e5e24c;
  --color-terracotta: #ba8250;
  --color-teal: #438ca0;
  --color-magenta: #f316b0;
  --color-pink: #df2783;
  --color-saffron: #dd8931;
  --color-ink: #000000;
  --color-white: #ffffff;

  /* Semantic */
  --color-surface: var(--color-white);
  --color-text: var(--color-navy);
  --color-text-muted: color-mix(in oklab, var(--color-navy) 62%, var(--color-bone));
  --color-eyebrow: var(--color-plum);
  --color-headline: var(--color-violet);
  --color-accent: var(--color-plum);
  --color-accent-hover: var(--color-violet);

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --text-eyebrow: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-lede: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-hero: clamp(3.25rem, 1.1rem + 8.3vw, 10.125rem);
  --text-nav: 0.9375rem;
  --text-btn: 0.9375rem;

  /* Rhythm */
  --space-gutter: clamp(1rem, 0.5rem + 2.5vw, 3.5rem);
  --space-nav-y: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  --space-hero-top: clamp(3rem, 2rem + 6vw, 8rem);
  --space-hero-bottom: clamp(3rem, 2rem + 4vw, 6rem);

  /* Shape — the deck's cards use large radii; buttons are ticket-shaped or square */
  --radius-card: 48px;
  --btn-height: 48px;
  --btn-pad-x: 24px;
  --ticket-notch: 6.5px; /* radius of the scalloped corner cut-outs */
  --ticket-stub: 20px; /* distance of the dotted perforation from the right edge */

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 640ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Landing-page additions ---------- */
:root {
  /* Semantic hues: one per track, programme and audience segment. Used everywhere they appear. */
  --track-business: var(--color-plum);
  --track-entrepreneurship: var(--color-violet);
  --track-government: var(--color-navy);
  --track-security: var(--color-oxblood);
  --track-sustainability: var(--color-teal);
  --track-health: var(--color-saffron);
  --track-culture: var(--color-magenta);
  --track-sports: var(--color-terracotta); /* terracotta, not pink: 07 and 08 sit side by side */

  --programme-pitch: var(--color-violet);
  --programme-hackathon: var(--color-teal);
  --programme-showcase: var(--color-magenta);

  --audience-students: var(--color-saffron);
  --audience-professionals: var(--color-pink);
  --audience-leaders: var(--color-violet);

  --color-rule: color-mix(in oklab, var(--color-navy) 24%, transparent);
  --color-surface-soft: var(--color-bone);
  --color-accent-on-dark: var(--color-chartreuse); /* the one accent used on navy surfaces */

  /* Display scale: six steps, each assigned to a role once (see docs/05 §2.2) */
  --display-1: var(--text-hero);
  --display-2: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
  --display-3: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --display-4: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
  --display-5: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --display-6: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --text-band-title: var(--display-2);
  --text-card-title: var(--display-4);
  --text-stat: var(--display-3);
  --text-question: var(--display-4);

  /* One caps-label style */
  --text-small: 0.875rem;
  --text-caps: 0.75rem;
  --caps-tracking: 0.1em;

  --space-band: clamp(4rem, 2.5rem + 6vw, 9rem);
  --space-band-tight: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  --measure: 62ch;
  --page-max: 1280px;

  --dot: 10px; /* dot-matrix cell dot */
  --dot-gap: 2px;
  --dot-marker: 6px; /* every list marker on the page */

  /* Rules: a solid 1px ink line, used by every rule, underline and table border. The dotted
     "running stitch" survives only on the ticket perforation and the patch edges. */
  --stitch-dot: 1px;
  --stitch-pitch: 6px;
  --stitch-color: var(--color-ink);

  /* Ground: the hero's dot grid, continued on the bone surfaces */
  --grid-size: 16px;
  --grid-dot: color-mix(in oklab, var(--color-navy) 14%, transparent);
  --grid: radial-gradient(circle, var(--grid-dot) 1.05px, transparent 1.65px);

  /* Grain for the jewel surfaces (static SVG noise, blended softly) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Stepped-pixel edge: one pixel is a quarter of the card radius, two rows */
  --step: 24px;
}

/* The rule image is declared on every element (not inherited), so each element draws it in
   its own `--stitch-color`: a surface or a pseudo-element can recolour the rule by setting
   that one property. */
*,
*::before,
*::after {
  --stitch: linear-gradient(var(--stitch-color), var(--stitch-color));
  --stitch-dotted: radial-gradient(circle, var(--stitch-color) 1px, transparent 1.6px);
}