/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --paper:       #faf8f1;
  --paper-dark:  #f0ead9;
  --paper-deep:  #e6dece;

  --ink:         #2A2018;
  --ink-mid:     #5C4F3A;
  --ink-faint:   #9C8E78;
  --ink-ghost:   #C8BDA8;

  --rust:        #8B3A2A;
  --rust-light:  #B85C40;
  --sage:        #4A6741;
  --sage-light:  #6B8F62;
  --ochre:       #9A7B3A;
  --gold:        #B8943A;
  --slate:       #3D4F5C;
  --slate-light: #5A7080;
  --link-text: var(--ink-mid);
  --link-text-hover: var(--ink);
  --link-text-muted: var(--ink-faint);
  --link-underline: color-mix(in srgb, var(--ink-mid) 42%, transparent 58%);
  --link-underline-hover: color-mix(in srgb, var(--ink) 74%, transparent 26%);
  --link-surface-subtle: color-mix(in srgb, var(--ink-ghost) 18%, transparent 82%);
  --link-surface-active: color-mix(in srgb, var(--ink-ghost) 28%, transparent 72%);
  --link-inline: var(--link-text);
  --link-inline-hover: var(--link-text-hover);
  --link-inline-visited: var(--link-text);
  --link-ui: var(--link-text-muted);
  --link-ui-hover: var(--link-text-hover);
  --link-text-strong: var(--link-text-hover);
  --link-surface-inline: transparent;
  --link-surface-inline-hover: transparent;
  --link-surface-inline-active: transparent;
  --link-surface-inline-visited: transparent;
  --link-surface-nav: transparent;
  --link-surface-nav-hover: var(--link-surface-subtle);
  --link-surface-nav-active: var(--link-surface-active);
  --link-surface-nav-visited: transparent;
  --link-surface-nav-chip: transparent;
  --link-surface-nav-chip-hover: var(--link-surface-subtle);
  --link-surface-nav-chip-active: var(--link-surface-active);
  --link-surface-nav-chip-visited: transparent;
  --link-surface-context: transparent;
  --link-surface-context-hover: var(--link-surface-subtle);
  --link-surface-context-active: var(--link-surface-active);
  --link-surface-context-visited: transparent;
  --link-surface-cta: transparent;
  --link-surface-cta-hover: var(--link-surface-subtle);
  --link-surface-cta-active: var(--link-surface-active);
  --link-surface-cta-visited: transparent;
  --link-surface-footer: transparent;
  --link-surface-footer-hover: transparent;
  --link-surface-footer-active: transparent;
  --link-surface-footer-visited: transparent;
  --tag-chip: var(--ink-faint);
  --tag-chip-hover: var(--ink-mid);
  --experience-switch-surface: #ffd83e;
  --experience-switch-shadow: #141414;
  --experience-switch-ink: #151515;
  --experience-switch-hover-surface: #fff2b0;
  --experience-switch-active-surface: #ffffff;
  --experience-switch-active-ring: #141414;
  --experience-switch-focus-inner: color-mix(in srgb, #ffffff 74%, transparent 26%);
  --experience-switch-focus-outer: color-mix(in srgb, #141414 66%, transparent 34%);
  --control-attention-surface: var(--experience-switch-surface);
  --control-attention-shadow: var(--experience-switch-shadow);
  --control-attention-ink: var(--experience-switch-ink);
  --control-attention-hover-surface: var(--experience-switch-hover-surface);
  --control-attention-active-surface: var(--experience-switch-active-surface);
  --control-attention-active-ring: var(--experience-switch-active-ring);
  --control-attention-focus-inner: var(--experience-switch-focus-inner);
  --control-attention-focus-outer: var(--experience-switch-focus-outer);

  --serif:       'EB Garamond', Georgia, serif;
  --serif-alt:   'Cormorant Garamond', Georgia, serif;
  --mono:        'DM Mono', 'Courier New', monospace;

  /* Typography scale tokens */
  --fs-body:                     0.875rem;
  --fs-nav-title:                1.1rem;
  --fs-link-nav:                 0.75rem;
  --fs-nav-toggle:               1.2rem;
  --fs-label-section:            0.75rem;
  --fs-heading-hero-min:         2.5rem;
  --fs-heading-hero-max:         5.5rem;
  --fs-body-hero:                0.875rem;
  --fs-footer-text:              0.75rem;
  --fs-link-footer-nav:          0.75rem;
  --fs-label-modules-header:     0.75rem;
  --fs-count-modules-header:     0.75rem;
  --fs-label-module-number:      0.75rem;
  --fs-heading-module-card:      1.25rem;
  --fs-heading-module-card-md:   1.5rem;
  --fs-body-module-card:         0.875rem;
  --fs-body-module-card-md:      0.875rem;
  --fs-status-module:            0.75rem;
  --fs-summary-header:           0.95rem;
  --fs-summary-subheader:        0.75rem;
  --fs-link-results-nav:         0.75rem;
  --fs-results-nav-dot:          1.2rem;
  --fs-step-indicator:           0.75rem;
  --fs-module-header-number:     0.75rem;
  --fs-heading-module-min:       2rem;
  --fs-heading-module-max:       3.5rem;
  --fs-body-module-header:       0.875rem;
  --fs-module-tag:               0.75rem;
  --fs-button-action:            0.75rem;
  --fs-stage-label:              0.85rem;
  --fs-link-module-sub-nav:      0.75rem;
  --fs-link-diagnosis:           0.75rem;
  --fs-note-search:              0.68rem;
  --fs-note-title:               0.9rem;
  --fs-note-meta:                0.7rem;
  --fs-note-summary:             0.74rem;

  /* Icon scale */
  --icon-size-sm:                0.82rem;
  --icon-size-md:                1.05rem;
  --icon-size-lg:                1.2rem;

  /* Shared card primitives */
  --card-surface:                var(--paper-dark);
  --card-border-color:           var(--paper-deep);
  --card-border-width:           1px;
  --card-accent-color:           var(--sage);
  --card-accent-width:           3px;
  --card-radius:                 0;
  --card-shadow-hover:           0 3px 0 rgba(17, 34, 54, 0.08);
  --card-pad-x:                  1.1rem;
  --card-pad-y:                  1rem;
  --shadow-nav-popover:          0 8px 22px rgba(42, 32, 24, 0.14);
  --z-doodle-backdrop:           0;
  --z-doodle-foreground:         1;
  --z-content-overlay:           2;
  --z-results-nav:               50;
  --z-main-nav:                  100;
  --z-nav-popover:               160;
  --z-nav-submenu:               170;
  --z-skip-link:                 1000;
  --z-tooltip:                   1400;
  --nav-surface:                 color-mix(in srgb, var(--paper) 80%, transparent 20%);
  --nav-surface-border:          #000;
  --nav-surface-filter:          blur(12px) saturate(1.06);
  --nav-menu-surface:            color-mix(in srgb, var(--paper) 80%, var(--paper-dark) 20%);
  --nav-menu-border:             color-mix(in srgb, var(--ink-ghost) 44%, transparent 56%);
  --nav-menu-filter:             blur(12px) saturate(1.06);
  --nav-menu-active-surface:     color-mix(in srgb, var(--paper-dark) 80%, var(--paper) 20%);
  --nav-submenu-surface:         rgba(240, 234, 217, 0.82); /* #f0ead9 = --paper-dark at 82% */
  --nav-menu-open-top-offset:    calc(100% - 0.25rem);
  --nav-submenu-top-desktop:     calc(100% + 0.35rem);
  --nav-submenu-top-mobile:      calc(100% + 0.24rem);
  --nav-editorial-shift-y:       -0.24rem;
  --nav-modules-toggle-shift-y:  -0.3rem;
  --nav-submenu-max-inline-size: min(22rem, calc(100vw - 1.6rem));
  --results-nav-top-offset:      4rem;

  /* Visualization tokens consumed by gc-viz.js */
  --viz-ink:        var(--ink);
  --viz-ink-mid:    var(--ink-mid);
  --viz-ink-faint:  #7A6E5F;
  --viz-ink-ghost:  #B0A490;
  --viz-rust:       var(--rust);
  --viz-rust-light: var(--rust-light);
  --viz-ochre:      var(--ochre);
  --viz-gold:       var(--gold);
  --viz-slate:      var(--slate);
  --viz-slate-light: var(--slate-light);
  --viz-sage:       var(--sage);
  --viz-sage-light: var(--sage-light);
  --viz-font-mono:  var(--mono);
  --viz-fs-track-label: 12px;
  --viz-fs-track-end:   12px;
  --viz-fs-label:       16px;
  --viz-fs-legend:      16px;
  --viz-fs-co-label:    16px;
  --viz-fs-top-legend:  16px;
  --viz-lh-top:         1.55;
  --viz-lh-legend:      1.7;
  --viz-scale:          1;
  --viz-scale-mobile:   1.06;
  --viz-problem-radius: 4;
  --viz-choice-radius:  34;
}