/* ==========================================================================
   THE ADVOCATE / THE DOCKET — design tokens
   Single source of truth for colour, type, spacing, rules and motion.
   Do not hard-code these values anywhere else in the stylesheet or pages.
   ========================================================================== */

:root {
  /* --- Ink: near-black through charcoal ------------------------------- */
  --ink-900: #0a0a0b;   /* page ground */
  --ink-850: #0e0f11;
  --ink-800: #131417;   /* raised panels */
  --ink-750: #181a1e;   /* charcoal */
  --ink-700: #1f2126;
  --ink-600: #2a2d33;

  /* --- Ivory: warm, paper-like ---------------------------------------- */
  --ivory-50:  #fbf7ef;  /* headline white */
  --ivory-100: #f2ecdf;  /* body copy on dark */
  --ivory-200: #e3dbc9;
  --ivory-300: #cdc3ae;
  --ivory-400: #a9a091;  /* secondary / captions on dark */
  --ivory-500: #8a8377;  /* tertiary */

  /* --- Gold: antique / champagne, never brassy ------------------------ */
  --gold-200: #e6d4a8;
  --gold-300: #d7bf87;
  --gold-400: #c4a468;   /* primary accent */
  --gold-500: #a8873f;   /* borders, dimmed accent */
  --gold-600: #7d6531;   /* hairlines */

  /* --- Ink on ivory (light editorial sections) ------------------------ */
  --on-ivory-900: #14130f;
  --on-ivory-700: #33302a;
  --on-ivory-500: #5d574c;
  --on-ivory-rule: rgba(20, 19, 15, 0.14);

  /* --- Rules & borders: restrained hairlines -------------------------- */
  --rule-hair: rgba(242, 236, 223, 0.12);
  --rule-soft: rgba(242, 236, 223, 0.18);
  --rule-firm: rgba(242, 236, 223, 0.28);
  --rule-gold: rgba(196, 164, 104, 0.38);

  /* --- Semantic ------------------------------------------------------- */
  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --bg-sunken:     #070708;
  --text:          var(--ivory-100);
  --text-strong:   var(--ivory-50);
  --text-muted:    var(--ivory-400);
  --accent:        var(--gold-400);
  --focus:         var(--gold-300);
  --urgent:        #c2453c;   /* emergency notice only */

  /* --- Type families --------------------------------------------------- */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* --- Type scale (fluid, editorial) ---------------------------------- */
  --step--2: 0.6875rem;                                  /* 11px labels   */
  --step--1: 0.8125rem;                                  /* 13px meta     */
  --step-0:  1.15rem;                                    /* 18.4px base   */
  /* Cormorant Garamond has a smaller x-height than the serif it replaced;
     the base step carries ~8% more size so body copy reads the same. */
  --step-1:  clamp(1.1875rem, 0.4vw + 1.09rem, 1.375rem);
  --step-2:  clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
  --step-3:  clamp(1.875rem, 2vw + 1.375rem, 2.75rem);
  --step-4:  clamp(2.375rem, 4vw + 1.375rem, 4rem);
  --step-5:  clamp(2.875rem, 6vw + 1.25rem, 5.5rem);

  --leading-tight: 1.04;
  --leading-title: 1.14;
  --leading-body:  1.68;
  --tracking-label: 0.18em;
  --tracking-title: -0.015em;

  /* --- Spacing (8px base, generous) ----------------------------------- */
  --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-10: 8rem;

  /* --- Layout --------------------------------------------------------- */
  --measure: 34rem;           /* readable editorial column */
  --width-page: 78rem;
  --width-wide: 90rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 4.25rem;
  --subnav-h: 2.875rem;

  /* --- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
}