/*
 * VantageLedger — Design Tokens (Editorial)
 * =========================================
 * Cream paper, ink black, forest-emerald accent. Newsreader headlines,
 * Inter UI, IBM Plex Mono numerals.
 * Read: Bloomberg Businessweek meets a private bank statement.
 */

:root {
  /* ==========================================
   * SURFACES — paper, not gray
   * ========================================== */
  --paper:        #F2EFE8;   /* page background — cream/bone */
  --paper-soft:   #FFFEFA;   /* card surface — warm white */
  --paper-sunken: #E9E4D7;   /* sunken / disabled */
  --paper-warm:   #F7F3EA;   /* hover tint */

  /* ==========================================
   * INK — text + iconography
   * ========================================== */
  --ink:           #0A0A0A;
  --ink-secondary: #2A2A2A;
  --ink-muted:     #5A5752;
  --ink-faint:     #8E8B85;
  --ink-disabled:  #B5B0A4;
  --ink-inverse:   #F2EFE8;

  /* ==========================================
   * LINES
   * ========================================== */
  --line:        #D8D3C8;
  --line-strong: #B5B0A4;
  --line-rule:   var(--ink);

  /* ==========================================
   * ACCENT — forest emerald
   * Sparingly used: wordmark accent, CTAs, links, eyebrows.
   * Positive change reuses the same hue — growth is the brand color.
   * ========================================== */
  --emerald-50:  #E7F0EC;
  --emerald-100: #C9DDD2;
  --emerald-200: #A4C5B2;
  --emerald-300: #7BAA8E;
  --emerald-400: #4F8C68;
  --emerald-500: #0E5C3A;   /* MAIN */
  --emerald-600: #0A4A2E;
  --emerald-700: #073621;
  --emerald-800: #052918;
  --emerald-900: #031A0F;

  --accent:        var(--emerald-500);
  --accent-hover:  var(--emerald-600);
  --accent-soft:   var(--emerald-50);
  --accent-tint:   var(--emerald-100);

  /* ==========================================
   * SIGNALS — positive / negative / premium / info
   * ========================================== */

  --positive:     #0E5C3A;
  --positive-bg:  rgba(14, 92, 58, 0.10);
  --positive-tint:#E7F0EC;
  --positive-strong: #0A4A2E;
  --positive-pressed: #073621;

  --negative:     #A93226;
  --negative-bg:  rgba(169, 50, 38, 0.10);
  --negative-tint:#F6E4E1;
  --negative-strong: #8B2820;
  --negative-pressed: #6E1F19;

  --premium:      #B8884B;
  --premium-bg:   rgba(184, 136, 75, 0.12);
  --premium-tint: #F1E7D2;
  --premium-strong: #966D39;
  --premium-pressed: #74532B;

  --info:         #2C5282;
  --info-bg:      rgba(44, 82, 130, 0.10);
  --info-tint:    #DCE6F2;
  --info-strong:  #1A3450;

  /* Category-dot palette — non-brand colors used only as taxonomy markers in badges. */
  --category-index:     #5B21B6;
  --category-commodity: #9C7A29;

  /* Dark surfaces — accent and quiet text tuned for the ink footer. */
  --accent-on-dark:    #5BB68A;
  --ink-on-dark-muted: #A5A2A0;
  --ink-pressed:       #000000;

  /* ==========================================
   * WARM NEUTRAL RAMP — desaturated paper, not cold gray
   * ========================================== */
  --color-gray-50:  #F5F2EA;
  --color-gray-100: #E9E4D7;
  --color-gray-200: #D8D3C8;
  --color-gray-300: #B5B0A4;
  --color-gray-400: #8E8B85;
  --color-gray-500: #6E6B66;
  --color-gray-600: #514E49;
  --color-gray-700: #3A3833;
  --color-gray-800: #25231F;
  --color-gray-900: #14130F;

  /* ==========================================
   * INDICATOR COLORS — kept for chart datasets
   * These are functional (40+ technical indicators), not brand.
   * ========================================== */
  --color-sma-20:  rgb(255, 165, 0);
  --color-sma-50:  rgb(153, 102, 255);
  --color-sma-100: rgb(255, 99, 132);
  --color-sma-200: rgb(54, 162, 235);

  --color-ema-20:  rgb(34, 197, 94);
  --color-ema-50:  rgb(220, 38, 38);
  --color-ema-100: rgb(217, 70, 239);
  --color-ema-200: rgb(120, 53, 15);

  --color-rsi-9:   rgb(239, 68, 68);
  --color-rsi-14:  rgb(14, 165, 233);
  --color-rsi-21:  rgb(168, 85, 247);
  --color-rsi-25:  rgb(251, 146, 60);

  --color-macd-26: rgb(59, 130, 246);

  --color-bb-10: rgb(20, 184, 166);
  --color-bb-20: rgb(245, 158, 11);
  --color-bb-50: rgb(139, 92, 246);

  --color-stochastic-5:  rgb(239, 68, 68);
  --color-stochastic-9:  rgb(14, 165, 233);
  --color-stochastic-14: rgb(168, 85, 247);
  --color-stochastic-21: rgb(251, 146, 60);

  --color-atr-7:  rgb(16, 185, 129);
  --color-atr-14: rgb(234, 88, 12);
  --color-atr-21: rgb(99, 102, 241);
  --color-atr-28: rgb(244, 114, 182);

  --color-adx-14: rgb(59, 130, 246);
  --color-adx-21: rgb(99, 102, 241);
  --color-adx-28: rgb(139, 92, 246);
  --color-di-plus: rgb(34, 197, 94);
  --color-di-minus: rgb(239, 68, 68);

  --color-cci-14: rgb(239, 68, 68);
  --color-cci-20: rgb(14, 165, 233);
  --color-cci-50: rgb(168, 85, 247);

  --color-obv: rgb(16, 185, 129);

  --color-mfi-9: rgb(239, 68, 68);
  --color-mfi-14: rgb(14, 165, 233);
  --color-mfi-21: rgb(168, 85, 247);

  --color-parabolic_sar: rgb(255, 159, 64);

  --color-williams_r-9: rgb(239, 68, 68);
  --color-williams_r-14: rgb(14, 165, 233);
  --color-williams_r-21: rgb(168, 85, 247);
  --color-williams_r-28: rgb(251, 146, 60);

  --color-vwap: rgb(34, 197, 94);

  --color-keltner_channels: rgb(251, 191, 36);

  --color-aroon-14: rgb(239, 68, 68);
  --color-aroon-25: rgb(14, 165, 233);
  --color-aroon-50: rgb(168, 85, 247);

  --color-stochastic_rsi-9: rgb(239, 68, 68);
  --color-stochastic_rsi-14: rgb(14, 165, 233);
  --color-stochastic_rsi-21: rgb(168, 85, 247);

  --color-donchian_channels-10: rgb(239, 68, 68);
  --color-donchian_channels-20: rgb(14, 165, 233);
  --color-donchian_channels-55: rgb(168, 85, 247);

  --color-cmf-10: rgb(239, 68, 68);
  --color-cmf-20: rgb(14, 165, 233);
  --color-cmf-21: rgb(168, 85, 247);

  --color-roc-9:  rgb(239, 68, 68);
  --color-roc-14: rgb(14, 165, 233);
  --color-roc-25: rgb(168, 85, 247);

  --color-wma-20: rgb(139, 92, 246);
  --color-wma-50: rgb(6, 182, 212);
  --color-wma-100: rgb(249, 115, 22);
  --color-wma-200: rgb(16, 185, 129);

  --color-hma-20: rgb(236, 72, 153);
  --color-hma-50: rgb(20, 184, 166);
  --color-hma-100: rgb(250, 204, 21);
  --color-hma-200: rgb(99, 102, 241);

  --color-dema-20: rgb(239, 68, 68);
  --color-dema-50: rgb(234, 88, 12);
  --color-dema-100: rgb(34, 197, 94);
  --color-dema-200: rgb(14, 165, 233);

  --color-tema-20: rgb(168, 85, 247);
  --color-tema-50: rgb(52, 211, 153);
  --color-tema-100: rgb(251, 130, 44);
  --color-tema-200: rgb(244, 63, 94);

  --color-trix-9: rgb(251, 130, 44);
  --color-trix-14: rgb(108, 117, 230);
  --color-trix-25: rgb(52, 211, 153);

  --color-ppo-26: rgb(59, 130, 246);

  --color-dpo-10: rgb(239, 68, 68);
  --color-dpo-20: rgb(14, 165, 233);
  --color-dpo-50: rgb(168, 85, 247);

  --color-tsi: rgb(59, 130, 246);

  --color-ultimate_oscillator: rgb(168, 85, 247);

  --color-fisher_transform-9: rgb(239, 68, 68);
  --color-fisher_transform-10: rgb(14, 165, 233);
  --color-fisher_transform-14: rgb(168, 85, 247);

  --color-adl: rgb(52, 211, 153);

  --color-force_index-9: rgb(239, 68, 68);
  --color-force_index-13: rgb(14, 165, 233);
  --color-force_index-21: rgb(168, 85, 247);

  --color-mass_index: rgb(249, 115, 22);

  --color-vortex-14: rgb(59, 130, 246);
  --color-vortex-21: rgb(99, 102, 241);
  --color-vortex-28: rgb(139, 92, 246);

  --color-klinger: rgb(59, 130, 246);
  --color-klinger-signal: rgb(234, 88, 12);

  --color-standard_deviation-10: rgb(239, 68, 68);
  --color-standard_deviation-20: rgb(14, 165, 233);
  --color-standard_deviation-50: rgb(168, 85, 247);

  --color-chaikin_volatility: rgb(249, 115, 22);

  --color-coppock_curve: rgb(20, 184, 166);

  --color-heikin_ashi: rgb(59, 130, 246);

  --color-pivot_points-p: rgb(107, 114, 128);
  --color-pivot_points-r1: rgb(34, 197, 94);
  --color-pivot_points-r2: rgb(16, 185, 129);
  --color-pivot_points-r3: rgb(20, 184, 166);
  --color-pivot_points-s1: rgb(239, 68, 68);
  --color-pivot_points-s2: rgb(220, 38, 38);
  --color-pivot_points-s3: rgb(185, 28, 28);

  --color-kama-10: rgb(253, 186, 116);
  --color-kama-20: rgb(251, 146, 60);
  --color-kama-30: rgb(234, 88, 12);

  --color-chande_momentum_oscillator-9: rgb(250, 204, 21);
  --color-chande_momentum_oscillator-14: rgb(234, 179, 8);
  --color-chande_momentum_oscillator-20: rgb(161, 98, 7);

  --color-choppiness_index-14: rgb(167, 139, 250);
  --color-choppiness_index-20: rgb(139, 92, 246);
  --color-choppiness_index-50: rgb(109, 40, 217);

  --color-chaikin_oscillator: rgb(20, 184, 166);

  --color-elder_ray-9: rgb(59, 130, 246);
  --color-elder_ray-13: rgb(99, 102, 241);
  --color-elder_ray-21: rgb(139, 92, 246);

  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */

  /* Display — Newsreader (Google). Headlines, wordmark, italic accents. */
  --font-display: 'Newsreader', 'Source Serif Pro', 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Sans — Inter. UI labels, body copy, buttons, eyebrows. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Mono — IBM Plex Mono. Every numeric value: prices, %, volume, tickers. */
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Font sizes */
  --font-size-micro: 0.625rem;   /* 10 — micro labels (eyebrows, returns labels) */
  --font-size-2xs:   0.6875rem;  /* 11 — small mono captions */
  --font-size-xs:    0.75rem;    /* 12 */
  --font-size-tight: 0.8125rem;  /* 13 — pills, dense table cells */
  --font-size-sm:    0.875rem;   /* 14 */
  --font-size-base:  1rem;       /* 16 */
  --font-size-lg:    1.125rem;   /* 18 */
  --font-size-xl:    1.25rem;    /* 20 */
  --font-size-2xl:   1.5rem;     /* 24 */
  --font-size-3xl:   1.875rem;   /* 30 */
  --font-size-4xl:   2.25rem;    /* 36 */
  --font-size-5xl:   3rem;       /* 48 */
  --font-size-6xl:   4rem;       /* 64 — price hero */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   2;

  --letter-spacing-tight:    -0.02em;
  --letter-spacing-display:  -0.025em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.025em;
  --letter-spacing-wider:    0.05em;
  --letter-spacing-widest:   0.15em;

  /* ==========================================
   * SPACING — base-4 (unchanged)
   * ========================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ==========================================
   * BORDERS, RADII, SHADOWS, MOTION
   * Editorial leans on hairlines and rules rather than shadows.
   * ========================================== */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;

  --radius-none:    0;
  --radius-sm:      2px;
  --radius-xs:      3px;     /* rectilinear badge / pill corners */
  --radius-default: 4px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-full:    9999px;

  --shadow-none:    none;
  --shadow-xs:      0 1px 0 rgba(0,0,0,0.04);
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-soft:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-default: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:      0 12px 28px rgba(0,0,0,0.10);
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06);

  /* Motion — calm and brisk */
  --transition-fast:    120ms ease;
  --transition-default: 180ms ease;
  --transition-slow:    240ms ease;
  --transition-slower:  400ms ease;

  /* Z-index */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          500;
  --z-modal-backdrop: 900;
  --z-modal:         1000;
  --z-toast:         1100;
  --z-tooltip:       1200;

  /* Layout */
  --container-max-width:    1300px;
  --container-max-width-lg: 1600px;
  --navbar-height:          72px;
  --navbar-height-mobile:   60px;
  --indicator-pane-height:  120px;

  /* ==========================================
   * COMPONENT TOKENS
   * ========================================== */

  --btn-padding-x:    var(--space-5);
  --btn-padding-y:    var(--space-3);
  --btn-padding-x-sm: var(--space-4);
  --btn-padding-y-sm: var(--space-2);
  --btn-padding-x-lg: var(--space-6);
  --btn-padding-y-lg: var(--space-4);
  --btn-border-radius: var(--radius-default);
  --btn-font-weight:   var(--font-weight-medium);
  --btn-font-size:     var(--font-size-sm);
  --btn-font-size-sm:  var(--font-size-sm);

  --input-padding-x:        var(--space-4);
  --input-padding-y:        var(--space-3);
  --input-border-width:     var(--border-width-1);
  --input-border-radius:    var(--radius-default);
  --input-border-color:     var(--line-strong);
  --input-border-color-focus: var(--ink);
  --input-bg:               var(--paper-soft);
  --input-font-size:        var(--font-size-base);

  --card-padding:        var(--space-6);
  --card-padding-sm:     var(--space-5);
  --card-border-radius:  var(--radius-md);
  --card-border-color:   var(--line);
  --card-shadow:         var(--shadow-none);
  --card-shadow-hover:   var(--shadow-sm);
  --card-accent-height:  0px;

  --table-cell-padding-x: var(--space-4);
  --table-cell-padding-y: var(--space-3);
  --table-header-bg:      var(--paper-warm);
  --table-border-color:   var(--line);
  --table-hover-bg:       var(--paper-warm);

  --toast-padding-x:      var(--space-6);
  --toast-padding-y:      var(--space-4);
  --toast-border-radius:  var(--radius-default);
  --toast-min-width:      300px;
  --toast-max-width:      500px;
}

/* Responsive overrides */
@media (max-width: 768px) {
  :root {
    --navbar-height: var(--navbar-height-mobile);
    --card-padding:  var(--space-5);
    --btn-padding-x: var(--space-4);
    --btn-padding-y: var(--space-2);
  }
}

@media (max-width: 480px) {
  :root {
    --card-padding: var(--space-4);
  }
}

/* ==========================================
 * UTILITY CLASSES
 * ========================================== */

.text-accent    { color: var(--accent); }
.text-secondary { color: var(--ink-secondary); }
.text-muted     { color: var(--ink-muted); }
.text-success   { color: var(--positive); }
.text-error     { color: var(--negative); }
.text-warning   { color: var(--premium); }

.bg-accent    { background-color: var(--accent); }
.bg-secondary { background-color: var(--paper); }
.bg-success   { background-color: var(--positive); }
.bg-error     { background-color: var(--negative); }

/* Positive / negative numeric values — mono, semibold, brand-aligned */
.positive {
  color: var(--positive);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.negative {
  color: var(--negative);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Wordmark — Newsreader serif, "Ledger" in emerald */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--ink);
  font-style: normal;
}
.wordmark-accent { color: var(--accent); }
.wordmark-italic {
  font-style: italic;
  font-weight: var(--font-weight-normal);
}

/* Eyebrow — used above section headlines */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

/* Italic editorial caption */
.editorial-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

/* Mono utility — for any numeric run */
.mono, .ticker, .price, .change, .volume {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}