/* ============================================================================
   MINI RETIREMENT — BRAND TOKENS  (canonical, locked)
   ----------------------------------------------------------------------------
   The single source of truth for color, type, spacing, radii, shadows.
   This file defines CSS custom properties ONLY — no element or component
   styles — so it is safe to import into any page without side effects.

       <link rel="stylesheet" href="tokens.css">

   Palette: "Fresh"  · Type: "Editorial"  (both finalized).
   Names are hue-agnostic (--brand, --accent) so the palette can evolve without
   renaming. Legacy aliases (--forest, --terracotta) are provided at the bottom.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  /* ---------- COLOR ---------- */

  /* Paper / surface — 80% of any screen is --paper + --ink */
  --paper:        #EFF4EF;   /* primary background — fresh cool green-white */
  --paper-2:      #FFFFFF;   /* elevated surface — cards */
  --paper-3:      #E3EBE4;   /* recessed surface — tracks, insets, wells */
  --paper-dark:   #14201A;   /* deep surface for inverse blocks */

  /* Ink / text */
  --ink:          #1B2620;   /* primary text — near-black, green undertone */
  --ink-2:        #566760;   /* secondary text */
  --ink-3:        #889789;   /* tertiary / placeholder */
  --ink-deep:     #0E1813;   /* darkest — footer, deepest fills */
  --ink-on-dark:  #EFF4EF;   /* text on dark surfaces */

  /* Brand — fresh emerald; the "money / trust / calm" color */
  --brand:        #157F5F;   /* primary brand */
  --brand-deep:   #123F32;   /* deep evergreen — dark sections, inverse blocks */
  --brand-soft:   #5FBE9B;   /* mint — charts, soft fills */

  /* Accent — terracotta; the SINGLE attention color (CTAs, the one key number) */
  --accent:       #C97B4A;   /* primary accent */
  --accent-hover: #B36B3F;   /* hover / pressed */
  --accent-soft:  #E8B894;   /* tints, chart secondary */

  /* Lines / dividers — cool green, never gray */
  --line:         #D9E3DA;
  --line-strong:  #BFD0C2;

  /* Semantic — desaturated to belong to the family */
  --success:      #4A7C59;
  --success-soft: #DDE8DC;
  --warn:         #C49B3D;
  --warn-soft:    #F0E5C3;
  --danger:       #B5523A;
  --danger-deep:  #8E3D2A;
  --danger-soft:  #ECD0C5;

  /* Chart series (5-color sequence) */
  --chart-1: #157F5F;
  --chart-2: #C97B4A;
  --chart-3: #5FBE9B;
  --chart-4: #C49B3D;
  --chart-5: #8A6D9D;

  /* ---------- TYPE ---------- */
  --font-display: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale (clamped where it earns it) */
  --fs-display-xl: clamp(56px, 8vw, 112px);
  --fs-display-lg: clamp(48px, 6vw, 84px);
  --fs-display:    clamp(36px, 4.5vw, 60px);
  --fs-h1:         40px;
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  /* Weights */
  --fw-regular: 400;   /* display headings sit here */
  --fw-medium:  500;
  --fw-semi:    600;

  /* Tracking */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-overline: 0.12em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII (quiet curvature) ---------- */
  --radius-sm:   4px;    /* inputs, badges */
  --radius-md:   8px;    /* buttons, cards */
  --radius-lg:   16px;   /* large feature blocks */
  --radius-pill: 999px;  /* status badges + pill buttons only */

  /* ---------- SHADOWS (used sparingly) ---------- */
  --shadow-pop:  0 12px 32px -8px rgba(20, 32, 26, 0.16);
  --shadow-deep: 0 24px 48px -12px rgba(20, 32, 26, 0.22);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- LAYOUT ---------- */
  --content-max:    1280px;
  --content-narrow: 720px;
  --gutter: clamp(24px, 5vw, 80px);

  /* ---------- LEGACY ALIASES (design-system names) ---------- */
  --forest:           var(--brand);
  --forest-deep:      var(--brand-deep);
  --forest-soft:      var(--brand-soft);
  --terracotta:       var(--accent);
  --terracotta-hover: var(--accent-hover);
  --terracotta-soft:  var(--accent-soft);
}