/* Legal Skills HQ — design tokens (single source of truth for this site).
   Vendored from the Claude Design project "Legal Skills HQ — Design System"
   (claude.ai/design/p/6509e352-efcc-4903-8267-0ec62099fa7f), which was itself
   derived from this site's founding page — so these values ARE the brand.
   Change tokens there first, then re-vendor here; don't fork values in pages.
   Rules that ride with these tokens (see the project's readme):
   flat surfaces (hairline rules, not shadows), one bronze accent per view,
   serif headlines, sentence case, no emoji, § is the catalog marker. */
:root {
  /* ---- Base neutrals ---- */
  --paper:        #FBFAF7;
  --paper-sink:   #F3F1EA;
  --white:        #FFFFFF;
  --ink:          #1C2733;
  --ink-2:        #3D4A57;
  --ink-3:        #4A5764;
  --ink-4:        #5A6673;
  --ink-5:        #6B7683;
  --rule:         #E4E0D6;
  --rule-strong:  #D3CDBE;

  /* ---- Brand ---- */
  --navy:         #16324F;
  --navy-700:     #1E3E60;
  --navy-900:     #0F2438;
  --navy-border:  #3D5570;
  --bronze:       #8C6A3F;
  --bronze-700:   #7A5A34;
  --bronze-tint:  #F0E9DD;

  /* ---- On-navy ---- */
  --on-navy:      #F3F1EA;
  --on-navy-2:    #C8CFD8;
  --on-navy-3:    #9AA6B4;

  /* ---- Status (product surfaces only) ---- */
  --ok:           #2F7D5B;  --ok-bg:     #E7F0EA;
  --warn:         #B07A16;  --warn-bg:   #F6EED9;
  --danger:       #B0392F;  --danger-bg: #F5E4E2;

  /* ---- Semantic aliases (prefer in new work) ---- */
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-2);
  --text-body:       var(--ink-3);
  --text-muted:      var(--ink-4);
  --text-faint:      var(--ink-5);
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-inset:   var(--paper-sink);
  --surface-brand:   var(--navy);
  --border-default:  var(--rule);
  --border-strong:   var(--rule-strong);
  --color-primary:   var(--navy);
  --color-primary-hover: var(--navy-700);
  --color-primary-press: var(--navy-900);
  --color-accent:    var(--bronze);
  --color-accent-press: var(--bronze-700);
  --on-primary:      var(--on-navy);
  --focus-ring:      rgba(140, 106, 63, 0.45);

  /* ---- Typography ---- */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Aliases kept for existing page CSS */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  --fs-fine: 13px; --fs-caption: 13.5px; --fs-small: 14.5px; --fs-list: 15.5px;
  --fs-body: 17px; --fs-lede: 19px; --fs-h3: 16px; --fs-h2: 26px; --fs-h1: 44px;
  --fs-display: 56px; --fs-kicker: 12px;
  --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.65;
  --ls-brand: 0.18em; --ls-kicker: 0.14em; --ls-tight: -0.01em;

  /* ---- Spacing / radii / layout ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 14px; --sp-5: 18px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 44px; --sp-10: 72px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --content-max: 720px; --wide-max: 1080px; --gutter: 24px;
  --control-h: 44px; --control-h-sm: 36px; --border-w: 1px;

  /* ---- Elevation & motion (flat by default) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(28, 39, 51, 0.04);
  --shadow-card: 0 1px 3px rgba(28, 39, 51, 0.05), 0 8px 24px -18px rgba(28, 39, 51, 0.18);
  --shadow-pop:  0 12px 32px -8px rgba(15, 36, 56, 0.22);
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --press-scale: 0.98;
}