/*
  The Lawneds, design tokens
  Authority: plans/lawneds-brand-system.md. Do not add a token here without
  updating that document and styleguide.html. Section 13.3: a token added on one
  page and nowhere else is how design systems die.
*/

/* ---------- Fonts, self hosted. Never call Google Fonts (section 5.1). ----------
   Google serves Inter and Manrope as variable fonts, so the latin subset is two
   files rather than the four the brand system budgets for. Both weights ranges
   below are covered by the wght axis. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-var.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-var.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;
}

:root {
  /* ---------- Colour (section 4.1) ----------
     Ratios are computed, not estimated, and are verified in styleguide.html.
     The three rules that matter:
       --accent never carries text at body size and is never a button fill.
       --accent-strong is the only interactive colour: buttons, links, focus.
       --slate is never type on navy (1.74:1).                              */

  --navy: #123a63;         /* 11.60:1 on white  */
  --navy-deep: #0d2b4a;    /* hover for navy surfaces, footer legal bar     */
  --slate: #3e5f7e;        /*  6.68:1 on white, 1.74:1 on navy: never type  */
  --accent: #2e8b57;       /*  4.25:1 on white: fills and large text only   */
  --accent-strong: #26734a;/*  5.78:1 on white: ALL buttons, links, focus   */
  --accent-light: #5fbf8b; /*  5.14:1 on navy: footer links only            */
  --off-white: #f7f8fa;
  --white: #ffffff;
  --charcoal: #2a2a2a;     /* 14.35:1 on white. The only body colour. Never pure black. */
  --border: #e3e7ed;
  --border-strong: #c9d1db;
  --error: #b3261e;        /*  6.54:1 on white  */
  --success: var(--accent-strong);

  /* Overlays (section 4.5). Fixed opacity, never a gradient. */
  --overlay-hero: rgb(18 58 99 / 60%);
  --overlay-cta: rgb(18 58 99 / 65%);
  --overlay-tile: rgb(18 58 99 / 40%);
  --overlay-tile-hover: rgb(18 58 99 / 20%);

  /* ---------- Typography (section 5) ---------- */
  --font-heading: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Mobile scale is the base. Desktop overrides at 1024px, below. */
  --fs-h1: 34px;    --lh-h1: 1.1;  --ls-h1: -0.02em;
  --fs-h2: 28px;    --lh-h2: 1.2;  --ls-h2: -0.01em;
  --fs-h3: 22px;    --lh-h3: 1.3;
  --fs-h4: 18px;    --lh-h4: 1.4;
  --fs-lead: 18px;  --lh-lead: 1.6;
  --fs-body-lg: 17px;
  --fs-body: 16px;  --lh-body: 1.7;   /* 16px is the mobile floor (section 5.2) */
  --fs-small: 15px; --lh-small: 1.6;
  --fs-caption: 14px; --lh-caption: 1.5;
  --fs-eyebrow: 12px; --lh-eyebrow: 1.2; --ls-eyebrow: 0.12em;
  --fs-button: 16px; --lh-button: 1; --ls-button: 0.01em;

  --measure-prose: 720px;   /* approx 75ch at 17px */
  --measure-card: 60ch;

  /* ---------- Spacing (section 6.1). Everything is a multiple of 8.
     There is no 15px. There is no 20px. 4px is hairline adjustment only. ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ---------- Layout (section 6.2) ---------- */
  --page-max: 1280px;
  --content-max: 1100px;
  --outer-margin: var(--space-24);   /* 40px tablet, 64px desktop, below */
  --gutter: var(--space-24);
  --band-padding: var(--space-64);   /* 96px tablet, 128px desktop, below */

  /* ---------- Radius (section 7.1). Nothing is fully rounded. ---------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* ---------- Elevation (section 7.3). Shadow is a state, not a decoration.
     There are no resting shadows. ---------- */
  --shadow-header: 0 1px 3px rgb(18 58 99 / 8%);
  --shadow-hover: 0 4px 16px rgb(18 58 99 / 10%);

  /* ---------- Motion (section 10). Three animations exist. ---------- */
  --ease: ease-out;
  --dur-reveal: 500ms;    /* permitted range 400 to 600 */
  --dur-micro: 200ms;
  --dur-link: 150ms;
  --dur-nav: 300ms;
  --dur-accordion: 250ms;

  /* ---------- Icons (section 8.1) ---------- */
  --icon-stroke: 1.5;
  --icon-size: 24px;
  --icon-size-inline: 20px;
  --icon-size-feature: 32px;

  /* Focus (section 12.1). 3px ring, never removed. */
  --focus-ring: 3px;
}

/* Tablet: 640px and above (section 6.5) */
@media (min-width: 640px) {
  :root {
    --outer-margin: 40px;
    --band-padding: var(--space-96);
  }
}

/* Desktop: 1024px and above (section 6.5). Full type scale. */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 56px;
    --fs-h2: 40px;
    --fs-h3: 26px;
    --fs-h4: 20px;
    --fs-lead: 21px;
    --fs-body-lg: 19px;
    --fs-body: 17px;
    --fs-eyebrow: 13px;
    --outer-margin: var(--space-64);
    --band-padding: var(--space-128);
  }
}