/* ============================================================
   TED Digital - design tokens (THE CSS system)
   Source of truth for every value on the site. Transcribed from the
   locked design kit v1.1 (10 Jun 2026) - the :root block is verbatim,
   plus the two values the kit contract names but the kit page hardcodes
   (teal-dark) or implies (container width).
   Loads FIRST on the front end and inside the block editor.
   Rule: no value anywhere else that is not a var() from here.
   New value needed? Propose it into CLIENTS/TED-Digital/DESIGN.md first.
   ============================================================ */
:root {
  /* Brand palette */
  --ted-teal: #7CC8C5;
  --ted-teal-dark: #5FB5B2;   /* hover states only */
  --ted-black: #0A0A0A;
  --ted-charcoal: #1A1A1A;
  --ted-white: #FFFFFF;
  --ted-stone: #F3EFE9;

  /* Spacing - the Marbl scale, always */
  --gap-3xs: 4px; --gap-half: 5px; --gap-tight: 6px; --gap-2xs: 8px;
  --gap-xs: 10px; --gap-sm: 20px; --gap-md: 40px; --gap-lg: 60px;
  --gap-xl: 80px; --gap-2xl: 100px; --gap-3xl: 120px;

  /* Radius */
  --radius: 10px; --radius-lg: 20px; --radius-full: 100px; --radius-circle: 50%;

  /* Type */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 16px;
  --text-lg: clamp(18px, 1rem + 0.4vw, 20px);
  --text-xl: clamp(20px, 1rem + 0.8vw, 24px);
  --text-2xl: clamp(26px, 1.2rem + 1.2vw, 34px);
  --text-3xl: clamp(34px, 1.4rem + 2.2vw, 52px);
  --text-4xl: clamp(44px, 1.8rem + 3.4vw, 72px);

  /* Semantic surfaces + ink */
  --surface: var(--ted-white);          /* brochure-faithful: white is the page */
  --surface-warm: var(--ted-stone);     /* stone = warm alternating panels */
  --surface-raised: var(--ted-white);
  --ink: var(--ted-black);
  --ink-70: rgba(10, 10, 10, 0.75);
  --ink-50: rgba(10, 10, 10, 0.55);
  --line: rgba(10, 10, 10, 0.12);
  --line-soft: rgba(10, 10, 10, 0.07);
  /* On dark surfaces (header over imagery, mega menu) - the kit's values, named */
  --line-inverse: rgba(255, 255, 255, 0.45);
  --line-inverse-soft: rgba(255, 255, 255, 0.12);
  --ink-inverse-50: rgba(255, 255, 255, 0.5);
  --ink-inverse-70: rgba(255, 255, 255, 0.7);
  --ink-inverse-80: rgba(255, 255, 255, 0.8);

  /* Icons */
  --icon-xs: 16px; --icon-sm: 24px; --icon-md: 34px;

  /* Bento rows (the kit's 190 named; 140 for the figure tiles) */
  --row-bento: 190px; --row-stat: 140px;
  /* Split media: a portrait cutout beside text stops here */
  --media-max: 560px;

  /* Layout - one container, every section's edges align */
  --width-container: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* slow start + slow finish: reveals that open and close in place */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot + settle: small playful details only */
}