/* ==========================================================================
   The Advocate Path: design tokens (human-made redesign, 2026-10-13)
   Idea: "the path, kept on file" - a trusted law office opened to everyone: oxblood and parchment, Caslon type,
   ribbons that mark the important pages, warm portraits, and one sweeping curve (the path).
   Source: _tools/site-design/briefs/redesign-2026-10/theadvocatepath/ART-DIRECTION.md (its values win).
   The role names below (--color-*, --font-*, --text-*) are the ones every stylesheet of the site reads, so the inner
   pages take the new brand from here too. Fonts: base.css (@font-face, self-hosted WOFF2, OFL).
   ========================================================================== */
:root {
  /* ---- brand colours ---- */
  --ox: #5E1A2A;           /* oxblood: THE action and brand colour (buttons, ribbons, big shapes, links) */
  --ox-deep: #4C1421;      /* oxblood hover */
  --parchment: #EFE1DA;    /* the page: rose-tinted parchment */
  --brass: #B38B3F;        /* hairline rules and the ribbon stitch only; never text on parchment at body size */
  --brass-light: #D9B871;  /* small text on oxblood (6.7:1) */
  --brass-ink: #7A5A1E;    /* tiny meta on parchment (5.0:1) */
  --white: #FFFFFF;        /* cards, the intake sheet, the notice page */
  --ink-text: #1E2430;     /* text (13:1 on parchment) */
  --muted-text: #5B5550;   /* dates, help text (5.8:1 on parchment) */
  --line-ui: #8E7C74;      /* input borders (3.1:1 on parchment, 4.0:1 on white) */
  --line-hair: #D8C6BC;    /* hairlines */

  /* ---- colour roles (read by every stylesheet) ---- */
  --color-bg: var(--parchment);
  --color-surface: var(--white);
  --color-ink: var(--ink-text);
  --color-muted: var(--muted-text);
  --color-line: var(--line-ui);
  --color-line-soft: var(--line-hair);
  --color-accent: var(--ox);
  --color-accent-ink: var(--parchment);   /* text on oxblood: parchment 9.9:1 */
  --color-accent-text: var(--ox);         /* links and oxblood text on parchment 9.9:1, on white 12.7:1 */

  /* ---- type: Libre Caslon Text reads and heads; Courier Prime only for file numbers, dates, codes ---- */
  --font-heading: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-subhead: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-label: "Courier Prime", ui-monospace, "Courier New", monospace;
  --font-button: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --weight-heading: 700;
  --weight-subhead: 700;
  --weight-body: 400;
  --weight-bold: 700;
  --weight-label: 400;
  --weight-button: 700;
  --heading-transform: none;
  --heading-tracking: -0.01em;

  /* ---- type scale: desktop 1440 / phone 390, fluid between (h1 64/40, h2 42/30, h3 24/21, body 18/17) ---- */
  --text-display: clamp(40px, 26.3px + 3.43vw, 64px);   /* the home h1 */
  --text-h1: clamp(34px, 26.6px + 1.9vw, 52px);         /* h1 of inner pages (52 / 34) */
  --text-page-title: var(--text-h1);
  --text-h2: clamp(30px, 23.1px + 1.71vw, 42px);
  --text-h3: clamp(21px, 19.9px + 0.29vw, 24px);
  --text-h4: clamp(18px, 17.3px + 0.19vw, 20px);
  --text-body: clamp(17px, 16.6px + 0.1vw, 18px);
  --text-lede: clamp(18px, 17.3px + 0.19vw, 20px);         /* the hero lede: 20 px */
  --text-quote: clamp(26px, 22.3px + 0.95vw, 36px);        /* the large italic quote on oxblood: 36 / 26 */
  --text-small: 15px;
  --text-caption: 13px;                                  /* Courier meta; the smallest size anywhere */
  --text-letter: clamp(40px, 33.3px + 1.71vw, 58px);
  --leading-body: 1.65;
  --leading-small: 1.55;
  --leading-heading: 1.08;
  --leading-h1: 1.08;
  --leading-label: 1.4;
  --tracking-meta: 0.06em;
  --measure: 36em;                                       /* about 64 characters of Caslon */

  /* ---- spacing: 4 px base ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section: clamp(64px, 46px + 4.6vw, 112px);           /* vertical room of a home section */

  /* ---- shape and depth: square corners, no soft shadows; the ribbon and the curve carry the shape ---- */
  --radius-button: 0;
  --radius-card: 0;
  --radius-image: 0;
  --radius-input: 0;
  --chamfer: 0px;              /* the first build's cut corners: off (square everywhere) */
  --chamfer-sm: 0px;
  --border-width: 1px;
  --border-card: 1px solid var(--line-hair);
  --shadow-card: none;
  --shadow-button: none;
  --cut: none;
  --cut-in: none;
  --cut-sm: none;
  --cut-sm-in: none;
  --ribbon-w: 14px;            /* the card bookmark ribbon */
  --notch: 7px;                /* depth of a ribbon's V-notch */

  /* ---- grid ---- */
  --container: 1320px;
  --columns: 12;
  --gutter: 24px;
  --margin: clamp(16px, 4vw, 48px);
  --control-height: 52px;      /* inputs */
  --button-height: 54px;       /* the one filled button */
  --tab-height: 40px;
  --header-h: 92px;
  --header-h-scrolled: 68px;

  /* ---- the creative director's token names (briefs/redesign-2026-10/theadvocatepath/design-tokens.css) ---- */
  --tap-oxblood: var(--ox);
  --tap-oxblood-hover: var(--ox-deep);
  --tap-parchment: var(--parchment);
  --tap-brass: var(--brass);
  --tap-brass-light: var(--brass-light);
  --tap-brass-dark: var(--brass-ink);
  --tap-ink: var(--ink-text);
  --tap-white: var(--white);
  --text-meta: 13px;
  --input-height: 52px;
  --ribbon-width: 14px;
  --ribbon-length: 40px;
  --ribbon-grow: 10px;
  --ribbon-notch: 7px;
  --ribbon-stitch: 1px dashed var(--brass);
  --radius-portrait: 50%;
  --portrait-ring-gap: 12px;
  --header-height: 92px;
  --header-height-stuck: 68px;
  --focus-ring: 3px solid var(--ink-text);
  --focus-ring-on-accent: 3px solid var(--parchment);
  --focus-offset: 3px;

  /* ---- layers ---- */
  --z-sticky: 20;
  --z-header: 1030;

  /* ---- names the content and the admin's documents still use (inline styles, DB HTML) ---- */
  --ink: var(--ink-text);
  --ink-soft: var(--muted-text);
  --ink-mute: var(--muted-text);
  --paper: var(--parchment);
  --paper-2: var(--white);
  --rule: var(--line-hair);
  --brass-soft: var(--line-hair);
}

@media (max-width: 991.98px) {
  :root { --header-h: 64px; --header-h-scrolled: 64px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
}