/* ============================================================================
   ACTEON — Design tokens (shared foundation, imposed on both design tracks A/B)
   Source of truth: brand book 2026 v3 (p.45-48), dev brief _docs/06.
   Rule: real, opaque colours only (exception: justified photo scrim).
   ========================================================================== */

:root {
  /* --- Brand palette (exact brand book p.45-46) ------------------------- */
  --blue:        #00B0DB;  /* primary / signature accent */
  --blue-2:      #57B1D9;
  --blue-mid:    #9FCEE3;
  --blue-light:  #D9EBF1;
  --dark-blue:   #293E4F;
  --deep:        #173E5A;  /* custom-gradient deep end, premium dark surfaces */
  --black:       #060000;
  --white:       #FFFFFF;
  --graphite:    #404649;  /* 2nd picto colour */
  --dark-grey:   #4C5155;
  --mid-grey:    #838A89;
  --grey:        #E3E6EE;
  --light-grey:  #F9F7F6;

  /* --- Semantic (contrast-checked, WCAG AA) ---------------------------- */
  --ink:          #14232E;  /* primary text on light — ~12:1 on white */
  --ink-2:        #4C5155;  /* secondary text — ~7.8:1 on white */
  --ink-muted:    #6B7378;  /* meta / captions — ~4.6:1 on white (AA text) */
  --accent-text:  #007BA3;  /* blue used as TEXT on light (raw #00B0DB fails AA) */

  --surface:      #FFFFFF;  /* page */
  --surface-2:    #F9F7F6;  /* alt band (warm light) */
  --surface-3:    #EEF2F5;  /* cooler tint band */
  --surface-blue: #D9EBF1;  /* light-blue accent surface (tags, chips) */
  --surface-dark: #0E1D28;  /* dark premium sections (manifesto, footer) */
  --surface-dark-2:#16303F; /* raised cards on dark */

  --border:       #E3E6EE;
  --border-strong:#CBD5DD;
  --border-dark:  #2A3B47;  /* borders on dark surfaces */

  /* text on dark surfaces */
  --on-dark:        #FFFFFF;
  --on-dark-2:      #C3D0D8;  /* secondary on dark */
  --on-dark-muted:  #92A2AC;

  /* --- Buttons (accessible: signature blue is decorative, not text bg) -- */
  --btn-primary-bg:   #14232E;  /* deep navy pill, white text ~12:1 */
  --btn-primary-hover:#22394A;
  --btn-primary-ink:  #FFFFFF;

  /* --- Typography ------------------------------------------------------- */
  --font-sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif; /* track B display only */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* fluid type scale — ~7 steps */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);  /* 44 → 72 */
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3rem);       /* 32 → 48 */
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); /* 26 → 36 */
  --fs-h3:      1.25rem;   /* 20 */
  --fs-lg:      1.125rem;  /* 18 — lead */
  --fs-base:    1rem;      /* 16 */
  --fs-sm:      0.875rem;  /* 14 */
  --fs-xs:      0.75rem;   /* 12 — eyebrow / tag */

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  --ls-tight:   -0.02em;
  --ls-eyebrow:  0.14em;

  /* --- Spacing (base 4) ------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
  --sp-section: clamp(64px, 8vw, 112px);

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm:   6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 40px);

  /* --- Elevation (subtle navy-tinted) ----------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20,35,46,.06), 0 2px 6px rgba(20,35,46,.05);
  --shadow-md: 0 6px 16px rgba(20,35,46,.08), 0 2px 6px rgba(20,35,46,.05);
  --shadow-lg: 0 18px 48px rgba(20,35,46,.14), 0 6px 16px rgba(20,35,46,.08);

  /* --- Official gradients (brand book p.47) ----------------------------- */
  --grad-dark:       linear-gradient(120deg, #060000 0%, #173E5A 58%, #00B0DB 150%);
  --grad-deep:       linear-gradient(135deg, #173E5A 0%, #00B0DB 100%);
  --grad-blue-light: linear-gradient(120deg, #D9EBF1 0%, #00B0DB 100%);
  --grad-white-blue: linear-gradient(120deg, #FFFFFF 0%, #00B0DB 130%);
  /* horizontal scrim for text over photography (justified transparency) */
  --scrim-left: linear-gradient(90deg, rgba(6,10,14,.78) 0%, rgba(6,10,14,.5) 38%, rgba(6,10,14,.12) 66%, rgba(6,10,14,0) 85%);

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  150ms;
  --dur:       260ms;
  --dur-slow:  460ms;
  --dur-reveal: 900ms;                          /* long, soft settle for scroll reveals */
  --ease-glide: cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo - very damped tail */

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(0,176,219,.45);
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* shared layout helpers both tracks may use */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 999;
  background: var(--btn-primary-bg); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }