/* Dhiyo design tokens. The only file allowed to hold raw colour values.
   Source: Dhiyo Brand Identity Guidelines v1.0 (§03 Colour, §04 Type, §05 Grid, §08 Digital). */
:root {
  /* Palette */
  --navy: #062348;
  --deep: #001A36;
  --blue: #0D6BA0;    /* Innovation Blue: links, sub-heads (5.8:1 on white) */
  --signal: #3584C9;  /* Signal Blue: UI accents only, never small text on white */
  --sky: #94C7E9;     /* Sky Depth: decorative on white, text only on navy */
  --cloud: #EAF3FA;
  --mist: #F4F7FA;
  --line: #D9E1EA;
  --steel: #5B6B7F;
  --graphite: #1C2430;
  --white: #FFFFFF;
  --amber: #F2B23A;   /* Spark Amber: one spark per composition, max 3% of a screen */

  /* Tints used on navy (from the pillar profiles) */
  --navy-text-muted: #C9DDF0;
  --navy-line: rgba(148, 199, 233, 0.35);
  --navy-raised: #0A2F5C;
  --scrim: rgba(0, 26, 54, 0.6);
  --sky-wash: rgba(148, 199, 233, 0.16);
  /* Form errors only. Not a brand colour (BG defines none); 6.5:1 on white. See TODO.md C3. */
  --error: #B3261E;
  --error-wash: #FBEDEC;

  /* Semantic */
  --text: var(--graphite);
  --text-muted: var(--steel);
  --heading: var(--navy);
  --link: var(--blue);
  --link-hover: var(--navy);
  --surface: var(--white);
  --surface-alt: var(--cloud);
  --surface-soft: var(--mist);
  --border: var(--line);
  --focus: var(--blue);
  --accent: var(--sky);

  /* Brand gradient: digital heroes only (BG §03) */
  --gradient-hero: linear-gradient(120deg, var(--navy) 0%, var(--blue) 70%, var(--signal) 100%);

  /* Diamond lattice tile (BG §05 patterns), stroke in Sky */
  --pattern-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 6 30 18 18 30 6 18Z' fill='none' stroke='%2394C7E9' stroke-width='1.4'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: "Montserrat", "Arial Black", Arial, sans-serif;
  --font-body: "Lato", "Segoe UI", Arial, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.55rem + 4.2vw, 5.5rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.55vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-overline: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --track-display: -0.02em;
  --track-overline: 0.2em;
  --measure: 66ch;

  /* Spacing: 8 px baseline (BG §05 web grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);

  /* Layout: 12 columns, 80 px margins at 1440, 16 px on phones */
  --page-max: 1440px;
  --gutter: clamp(16px, 1rem + 0.6vw, 24px);
  --margin: clamp(16px, 5.56vw, 80px);
  /* The header at the top of a page: the top bar plus the main bar. Once scrolled it is solid and compact. */
  --topbar-h: 38px;
  --header-bar-h: 88px;
  --header-h: calc(var(--header-bar-h) + var(--topbar-h));
  --header-h-solid: 72px;

  /* Shape */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-capsule: 999px;

  /* Depth offset: Sky plane down-left (BG §05) */
  --depth: -6px 6px 0 0 var(--sky);
  --depth-lg: -12px 12px 0 0 var(--sky);
  --shadow-header: 0 1px 0 var(--line), 0 8px 24px -12px rgba(6, 35, 72, 0.25);
  --shadow-card: 0 1px 2px rgba(6, 35, 72, 0.06), 0 12px 32px -18px rgba(6, 35, 72, 0.28);

  /* Motion: 200–400 ms ease-out (BG §08) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 320ms;
  --dur-slow: 400ms;

  /* Layers */
  --z-header: 100;
  --z-menu: 120;
  --z-cursor: 300;
  --z-wipe: 400;
  --z-loader: 500;
}