/*
  Amicus Strategies design tokens.
  Single source of truth for palette, type, spacing, radii, rules, shadows and motion.
  Every component in site.css reads these custom properties; change values here, not there.

  World: a chambers name board. Court-green painted fields set into Portland-stone grounds,
  accent colour reserved for the entry in play, hairline rules between entries.
*/

/* Fonts: self-hosted, latin subset, variable weight (SIL Open Font License). */
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
/* Metric-matched fallbacks keep layout still while the web fonts arrive. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 94%;
  ascent-override: 104%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Palette: stone, timberwolf, hunter green, sage ---------- */
  /* Forest & Sage (chosen 2026-09-30 from the palette Chris liked:
     dad7cd, a3b18a, 588157, 3a5a40, 344e41). */
  /* Hunter green: the primary. Buttons, links, rules and the footer. */
  --green-950: #344e41;   /* Brunswick green: footer, pressed state */
  --green-900: #3a5a40;   /* hunter green: primary */
  --green-800: #4a6e4f;
  --green-700: #4c6a58;   /* hairline rule on green */

  /* Timberwolf: the panel field, in place of full green blocks. */
  --sage-100: #e4e2d9;
  --sage-200: #d0cdc2;    /* hairline rule on panels */

  /* Stone: the ground. Warm off-white, lighter than timberwolf. */
  --stone-50: #ffffff;    /* paper: forms, raised planes */
  --stone-100: #f4f3ef;   /* the ground */
  --stone-200: #ebe9e2;   /* recessed plane */
  --stone-300: #d0cdc2;   /* hairline rule on stone */

  /* Ink: green-black text on stone. */
  --ink-900: #1f2a24;
  --ink-600: #4f5c53;     /* secondary text on stone, 6.4:1 */
  --ink-500: #5c6a61;     /* small text and control borders, 5.1:1 */

  /* Accent: sage for the one decorative mark, fern for accent text. */
  --accent-400: #a3b18a;  /* decorative only: current-page underline */
  --accent-700: #3f6444;  /* as text on stone 6.6:1, on panels 5.1:1 */

  /* Text on green, tinted from the green rather than grey. */
  --on-green: #f4f3ef;          /* 7.6:1 on green-900 */
  --on-green-muted: #bccbb9;    /* 5.1:1 on green-950 */

  --error: #9b2c1f;             /* on stone 6.4:1 */

  /* ---------- Semantic roles ---------- */
  --color-ground: var(--stone-100);
  --color-paper: var(--stone-50);
  --color-recess: var(--stone-200);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-rule: var(--stone-300);
  --color-rule-strong: var(--ink-900);
  /* Panels ("boards") are pale sage fields with ink text. */
  --color-board: var(--sage-100);
  --color-board-text: var(--ink-900);
  --color-board-muted: var(--ink-600);
  --color-board-rule: var(--sage-200);
  /* The footer is the one dark green field. */
  --color-footer: var(--green-950);
  --color-footer-text: var(--on-green);
  --color-footer-muted: var(--on-green-muted);
  --color-footer-rule: var(--green-700);
  --color-accent: var(--accent-400);
  --color-accent-text: var(--accent-700);
  --color-focus: var(--accent-700);
  --color-focus-on-board: var(--accent-700);
  --color-focus-on-footer: var(--accent-400);
  --color-selection-bg: var(--green-900);
  --color-selection-text: var(--on-green);

  /* ---------- Type ---------- */
  --font-display: "Noto Serif Display", "Serif Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", "Sans Fallback", Arial, Helvetica, sans-serif;

  --weight-display: 340;   /* display never goes bold: hierarchy is scale */
  --weight-display-strong: 420;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-strong: 600;

  /* Fluid scale, 390px to 1440px. Display tops out at 6rem. */
  --step--2: 0.8125rem;                                          /* 13px: fine print */
  --step--1: 0.875rem;                                           /* 14px: labels, meta */
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);             /* body 16-18 */
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);        /* lead 18-21 */
  --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);            /* h3 22-28 */
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);            /* h2 small 28-42 */
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);                /* h2 36-64 */
  --step-5: clamp(2.75rem, 1.7rem + 4.4vw, 6rem);                /* h1 44-96 */
  --step-num: clamp(3.25rem, 2rem + 5.2vw, 6rem);                /* data numerals 52-96 */

  --leading-tight: 1.04;
  --leading-display: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --tracking-display: -0.022em;
  --tracking-display-tight: -0.035em;
  --tracking-caps: 0.14em;        /* signwriter capitals on the board */
  --tracking-label: 0.06em;

  --measure: 66ch;
  --measure-narrow: 44ch;

  /* ---------- Space: 4px base ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);     /* huge whitespace between sections */
  --space-section-sm: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);          /* 16px at phone width */
  --grid-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --container: 88rem;                                   /* 1408px */
  --header-h: 5rem;

  /* ---------- Shape ---------- */
  --radius-0: 0;
  --radius-1: 2px;          /* buttons and inputs: cut, not pill */
  --rule-hair: 1px;
  --rule-strong: 2px;

  /* ---------- Motion: subtle fade and rise only ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* exponential ease-out */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-reveal: 900ms;
  --rise: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-reveal: 0ms;
    --rise: 0px;
  }
}