/* =========================================================
   EQUITYVOYAGE — DESIGN TOKENS (v2 — confirmed decisions applied)
   =========================================================
   Generated from a full audit of every CSS file in the
   project (Guided Journey side: js/css/*.css, goalmap side:
   goalmap/app/css/*.css), then revised against a round of
   confirmed decisions on the near-duplicate/ambiguous values
   the first pass had flagged. See css-audit-map.md for the
   original full audit and changelog.md for exactly what
   changed between the two passes and which existing CSS
   files were edited alongside this one.

   This file is still NOT wired into any page yet — linking
   it via <link> tags is a separate, later step.
========================================================= */

:root {

  /* -----------------------------------------------------
     COLORS
     "Brand" = the core EquityVoyage identity colors, used
     across both the Guided Journey and goalmap sides.
     "Neutrals" = grays/off-whites for text, borders,
     backgrounds. "Status" = gain/loss/neutral indicators
     in charts and callouts.
  ----------------------------------------------------- */

  /* Brand */
  --color-navy: #173763;   /* 40 uses across 11 files — the canonical EquityVoyage navy */
  --color-gold: #F2B45A;   /* 21 uses across 6 files — the canonical EquityVoyage gold */

  /* Brand — navy variants, kept distinct on purpose (not merged into
     --color-navy) until confirmed. See css-audit-map.md. */
  --color-navy-hover-1: #102740;  /* .hp-btn-primary:hover, goalmap home.css — NOT yet merged with hover-2, pending confirmation */
  --color-navy-hover-2: #0F2748;  /* .ph-nav-btn.ph-next:hover, philosophy.css — NOT yet merged with hover-1, pending confirmation */
  --color-navy-banner: #0B1F3F;   /* .ev-cta-banner background, journey-layout.css — deliberately darker, large-background use */

  /* Brand — dark, text-safe gold. Nine near-duplicate shades found across
     the project were unified into this one standard (the most-used
     exact-match value). See css-audit-map.md — source files still use
     their original raw values; only this token's own value reflects the
     decision, ready for a future wiring pass. */
  --color-gold-text: #BD7820;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #F7F8FA;
  --color-cream: #E1DDD3;
  --color-border: #E6E8EC;
  --color-border-alt: #E2E5EA;
  --color-border-light: #E5E7EB;
  --color-bg-muted: #F0F1F3;
  --color-gray-light: #9AA1AB;
  --color-gray-muted: #6B7280;
  --color-gray-blue: #5B6472;
  --color-gray-slate: #4B5563;
  --color-warm-gray: #6B6660;
  --color-taupe: #8A8478;
  --color-ink: #1F2733;
  --color-charcoal: #1C1B19;

  /* Status (gain / loss / neutral, used in charts + callouts) */
  --color-red: #C0392B;
  --color-red-dark: #A8392E;
  --color-green: #1F6B4D;

  /* -----------------------------------------------------
     SPACING
     Every distinct padding/margin value found in the
     project, in ascending order. Named after their own
     pixel value — e.g. --space-16 is 16px. The three
     confirmed near-duplicates (15→16, 25→24, 46→44) have
     already been corrected at their source files as well
     (see changelog.md) — there is no separate --space-15,
     --space-25, or --space-46 token.
  ----------------------------------------------------- */

  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;

  /* Intentional negative offsets (used to pull an element over
     its neighbor — a deliberate overlap technique, not a typo) */
  --space-neg-8: -8px;
  --space-neg-16: -16px;

  /* -----------------------------------------------------
     CONTENT WIDTHS
     Three distinct container widths, kept separate on purpose:
     reading-width for paragraph/text-column measure, container
     for page-wrapper widths, wide for goalmap's own home-page
     layout. Corrected from an earlier pass that mistakenly
     folded page-wrapper widths (1060/1080px) into the narrower
     reading-width token — those are a different kind of
     measurement (a whole page wrapper vs. a paragraph column)
     and needed their own token. Source files still use their
     original raw values for now (not yet wired to any of these
     tokens — a later step); nothing in the project references
     any of them yet, so this correction changes no rendered page.
  ----------------------------------------------------- */

  --content-width-reading: 650px;    /* paragraph/text-column width — was 620px (data-methodology.css .dm-download p), 640px (rolling.css .wrap base rule), 650px (goalmap utilities.css .gm-explainer-box), 700px (philosophy.css .ph-chapter, .ph-pagenav) */
  --content-width-container: 1060px; /* page-wrapper width — was 1060px (data-methodology.css .dm-wrap, knowledge.css .lr-wrap), 1080px (rolling.css .wrap inside @media (min-width:900px)) */
  --content-width-wide: 1200px;      /* goalmap home.css only (.hp-inner, .hp-nav-inner, .hp-main-cols) — deliberately separate, per the goalmap side's own layout */

  /* -----------------------------------------------------
     TYPOGRAPHY
  ----------------------------------------------------- */

  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  --font-size-8: 8px;
  --font-size-9: 9px;
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;

  /* -----------------------------------------------------
     SHADOWS
     Box-shadow values are mostly one-off/bespoke across
     this project (see audit map), so only the ones that
     appear identically more than once are proposed here.
  ----------------------------------------------------- */

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.05);      /* general card/panel elevation */
  --shadow-dropdown: 0 12px 24px rgba(0, 0, 0, .18); /* mobile nav dropdown menu */
  --shadow-marker-ring: 0 0 0 2px #fff;              /* white ring around a chart data-point marker */

  /* -----------------------------------------------------
     RADIUS
  ----------------------------------------------------- */

  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-pill: 999px;  /* fully-rounded pill buttons */
  --radius-circle: 50%;  /* circular badges/avatars/dots */
  --radius-logo: 10%;    /* rounded-square logo mark in the top bar (used identically 3x) */

}