/* ==========================================================================
   Saynon design tokens
   Brand values measured from Brand/Logos/saynon-official-logo.PNG.
   See ../docs/brand.md. Never hard-code a hex value in a component.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --navy: #002346;          /* canonical brand navy  */
  --cyan: #01ECF6;          /* canonical brand cyan  */

  /* --- Neutrals ---------------------------------------------------------
     Desaturated tints of the brand navy, not a borrowed grey scale. */
  --navy-900: var(--navy);
  --navy-700: #1B4266;
  --navy-600: #33587A;      /* body text on white, 7.4:1 */
  --navy-500: #4F7193;      /* secondary text on white, 5.1:1 */
  --navy-400: #7A93AE;      /* decorative only */
  --navy-300: #A8BCCF;      /* text on navy, 8.1:1 */
  --navy-200: #D2DEE8;
  --navy-150: #E2EAF2;      /* hairlines */
  --navy-100: #EDF3F8;
  --navy-050: #F6F9FC;      /* tinted surface */

  --white: #FFFFFF;

  /* --- Semantic --------------------------------------------------------- */
  --bg: var(--white);
  --bg-tint: var(--navy-050);
  --bg-dark: var(--navy-900);
  --text: var(--navy-600);
  --text-strong: var(--navy-900);
  --text-muted: var(--navy-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-300);
  --line: var(--navy-150);
  --line-on-dark: rgb(255 255 255 / 0.14);

  /* Focus must clear 3:1 against its backdrop. Cyan fails that on white,
     so light surfaces ring in navy and dark surfaces ring in cyan. */
  --focus: var(--navy-900);
  --focus-on-dark: var(--cyan);

  /* --- Type ------------------------------------------------------------- */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-eyebrow: 0.75rem;
  --step-body: 1.0625rem;
  --step-lead: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --step-h3: clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --step-h2: clamp(1.75rem, 1.33rem + 1.85vw, 2.75rem);
  --step-h1: clamp(2.3rem, 1.45rem + 3.6vw, 4.15rem);

  /* --- Space ------------------------------------------------------------ */
  --gutter: 1.25rem;
  --container: 71.25rem;    /* 1140px */
  --section-y: clamp(4.5rem, 3rem + 6.2vw, 8.25rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Restrained. Navy-tinted rather than black, so shadows read as depth
     and not as grime on a light page. */
  --shadow-sm: 0 1px 2px rgb(0 35 70 / 0.05);
  --shadow: 0 6px 24px -10px rgb(0 35 70 / 0.16);
  --shadow-lg: 0 32px 64px -24px rgb(0 35 70 / 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

@media (min-width: 40em) {
  :root { --gutter: 2rem; }
}