/* LEXACTA design tokens. Custom properties only. Maps 1:1 to theme.json (see HANDOFF.md). */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/roboto-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/roboto-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/roboto-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/sourceserif4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/sourceserif4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/sourceserif4-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }

:root {
  /* Colour: brand */
  --c-navy: #02305D;
  --c-navy-deep: #041B32;
  --c-bluegrey: #A2B9CA;
  --c-bluegrey-light: #B1C8D9;
  --c-ice: #ECF2F6;
  --c-white: #FFFFFF;
  /* Colour: accent (decorative only: rules, numerals >= 24px. Never body text.) */
  --c-brass: #9C7A45;
  /* Colour: functional */
  --c-text: #3A4450;          /* 9.9:1 on white, 9.0:1 on ice */
  --c-text-muted: #56616D;    /* 6.4:1 on white, 5.8:1 on ice */
  --c-text-on-dark: #D5E1EB;  /* 10.6:1 on navy */
  --c-line: #D5DFE7;
  --c-line-soft: #E1E8EE;
  --c-line-dark: #2A5580;
  --c-error: #A3262A;         /* 6.9:1 on white */
  --c-focus: #02305D;
  --c-focus-on-dark: #B1C8D9;

  /* Font families */
  --ff-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --ff-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ff-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale (360px -> 1280px viewport) */
  --fs-xs: 0.8125rem;                                  /* 13 */
  --fs-sm: 0.9375rem;                                  /* 15 */
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);  /* 16 -> 18 */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem); /* 18 -> 21 */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);  /* 20 -> 26 */
  --fs-2xl: clamp(1.5rem, 1.3rem + 0.87vw, 2rem);      /* 24 -> 32 */
  --fs-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);  /* 30 -> 44 */
  --fs-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.875rem);  /* 36 -> 62 */
  --fs-display: clamp(3.25rem, 1.4rem + 8.2vw, 9.5rem); /* 52 -> 152, LEX/EXACT/ACT letters */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --ls-eyebrow: 0.2em;

  /* Spacing scale */
  --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-section: clamp(4rem, 2.6rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.9vw, 3.5rem);

  /* Layout */
  --w-content: 45rem;   /* 720px, ~70ch reading width -> theme.json contentSize */
  --w-wide: 75rem;      /* 1200px -> theme.json wideSize */
  --w-full: 120rem;     /* 1920px max for full-bleed rows */

  /* Radii: flat brand, 0-4px */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* Borders */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-bar: 4px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.2, .6, .2, 1);

  /* Header */
  --header-h: 4.5rem;
  --logo-w: 7.5rem;
  --logo-h: 5.25rem;

  /* Breakpoints (reference values; media queries use the literals) */
  --bp-sm: 40em;  /* 640px */
  --bp-md: 64em;  /* 1024px */
  --bp-lg: 80em;  /* 1280px */
}

@media (min-width: 64em) {
  :root {
    --header-h: 6.5rem;
    --logo-w: 12.5rem;
    --logo-h: 8.75rem;
  }
}
