/* ============================================================
   SCOUT INVESTMENT PLATFORM — DESIGN TOKEN SYSTEM
   Version 2.0 — "Precision Light"
   
   PHILOSOPHY: A light, airy canvas where color ONLY appears 
   to communicate meaning. Bloomberg's information density 
   reimagined by the Linear/Stripe design team.
   
   RULES:
   1. Color = meaning. No decorative color.
   2. Numbers are ALWAYS monospace (JetBrains Mono).
   3. Cards use borders, not shadows (cleaner on light bg).
   4. Shadows only on elevated/floating elements.
   5. Every component earns its visual weight.
   ============================================================ */

:root {
  /* ── SURFACE HIERARCHY ──────────────────────────────────
     3 layers: Page → Card → Inset
     Cool-toned whites prevent a yellowed, cheap look.
     Subtle blue undertone = "precise" + "trustworthy" */
  --surface-page:        #D3D4D5;
  --surface-card:        #FFFFFF;
  --surface-inset:       #F1F3F6;
  --surface-elevated:    #FFFFFF;
  --surface-hover:       #F4F5F8;
  --surface-selected:    #EEF2FF;

  /* ── BORDERS ────────────────────────────────────────── */
  --border-subtle:       #E8EBF0;
  --border-default:      #D5DAE3;
  --border-strong:       #B4BCCA;
  --border-interactive:  #6366F1;

  /* ── TEXT ────────────────────────────────────────────── 
     Never pure black. Gray-900 is the darkest. */
  --text-primary:        #0E131F;
  --text-secondary:      #4B5563;
  --text-tertiary:       #6B7280;
  --text-disabled:       #9CA3AF;
  --text-inverse:        #FFFFFF;
  --text-link:           #4F46E5;

  /* ── BRAND ACCENT: INDIGO ───────────────────────────── 
     Sophisticated indigo (not generic fintech blue).
     Primary buttons, active nav, focus states, brand. */
  --accent-50:           #EEF2FF;
  --accent-100:          #E0E7FF;
  --accent-200:          #C7D2FE;
  --accent-300:          #A5B4FC;
  --accent-400:          #818CF8;
  --accent-500:          #6366F1;
  --accent-600:          #4F46E5;
  --accent-700:          #4338CA;

  /* ── SEMANTIC: POSITIVE ─────────────────────────────── 
     Profit, gains, bullish, Strong Buy, up candles,
     quality ≥70th pct, Piotroski pass criteria */
  --positive-50:         #ECFDF5;
  --positive-100:        #D1FAE5;
  --positive-400:        #34D399;
  --positive-500:        #10B981;
  --positive-600:        #059669;
  --positive-700:        #047857;
  --positive-bg:         #ECFDF5;
  --positive-text:       #065F46;

  /* ── SEMANTIC: NEGATIVE ─────────────────────────────── 
     Loss, declines, bearish, Sell, down candles,
     quality ≤30th pct, Altman distress */
  --negative-50:         #FFF1F2;
  --negative-100:        #FFE4E6;
  --negative-400:        #FB7185;
  --negative-500:        #F43F5E;
  --negative-600:        #E11D48;
  --negative-700:        #BE123C;
  --negative-bg:         #FFF1F2;
  --negative-text:       #9F1239;

  /* ── SEMANTIC: WARNING ──────────────────────────────── 
     Hold rating, medium severity, grey zone Z-score */
  --warning-50:          #FFFBEB;
  --warning-400:         #FBBF24;
  --warning-500:         #F59E0B;
  --warning-600:         #D97706;
  --warning-bg:          #FFFBEB;
  --warning-text:        #92400E;

  /* ── SEMANTIC: INFO ─────────────────────────────────── */
  --info-50:             #F0F9FF;
  --info-400:            #38BDF8;
  --info-500:            #0EA5E9;
  --info-600:            #0284C7;
  --info-bg:             #F0F9FF;
  --info-text:           #075985;

  /* ── FACTOR SCORE COLORS ────────────────────────────── 
     Each factor: unique, recognizable, beautiful.
     Used in gauges, radar, table headers, badges. */
  --factor-composite:    #6366F1;   /* Indigo */
  --factor-value:        #3B82F6;   /* Blue */
  --factor-quality:      #10B981;   /* Emerald */
  --factor-momentum:     #F59E0B;   /* Amber */
  --factor-growth:       #8B5CF6;   /* Violet */
  --factor-safety:       #06B6D4;   /* Cyan */

  --factor-composite-bg: #EEF2FF;
  --factor-value-bg:     #EFF6FF;
  --factor-quality-bg:   #ECFDF5;
  --factor-momentum-bg:  #FFFBEB;
  --factor-growth-bg:    #F5F3FF;
  --factor-safety-bg:    #ECFEFF;

  /* ── AI COLOR ───────────────────────────────────────── 
     Distinct violet signals "AI-generated content" */
  --ai-400:              #C084FC;
  --ai-500:              #A855F7;
  --ai-600:              #9333EA;
  --ai-bg:               #FAF5FF;
  --ai-text:             #6B21A8;

  /* ── SEVERITY ───────────────────────────────────────── */
  --severity-critical:   #DC2626;
  --severity-critical-bg:#FEF2F2;
  --severity-high:       #EA580C;
  --severity-high-bg:    #FFF7ED;
  --severity-medium:     #CA8A04;
  --severity-medium-bg:  #FEFCE8;

  /* ── RATING BADGES ──────────────────────────────────── */
  --rating-strong-buy:   #059669;
  --rating-strong-buy-bg:#ECFDF5;
  --rating-buy:          #10B981;
  --rating-buy-bg:       #ECFDF5;
  --rating-hold:         #D97706;
  --rating-hold-bg:      #FFFBEB;
  --rating-sell:         #E11D48;
  --rating-sell-bg:      #FFF1F2;
  --rating-strong-sell:  #BE123C;
  --rating-strong-sell-bg:#FFF1F2;

  /* ── PERCENTILE GRADIENT BACKGROUNDS ────────────────── */
  --pct-top:             #ECFDF5;   /* P80-100 */
  --pct-high:            #F0FDF4;   /* P60-80 */
  --pct-mid:             transparent;/* P40-60 */
  --pct-low:             #FFFBEB;   /* P20-40 */
  --pct-bottom:          #FFF1F2;   /* P0-20 */

  /* ── TYPOGRAPHY ─────────────────────────────────────── */
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:           'JetBrains Mono', 'SF Mono', monospace;

  --text-2xs:            0.625rem;   /* 10px */
  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.8125rem;  /* 13px */
  --text-base:           0.875rem;   /* 14px — denser default for dashboards */
  --text-lg:             1rem;       /* 16px */
  --text-xl:             1.125rem;   /* 18px */
  --text-2xl:            1.375rem;   /* 22px */
  --text-3xl:            1.75rem;    /* 28px */
  --text-4xl:            2.25rem;    /* 36px */

  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  --leading-tight:       1.2;
  --leading-snug:        1.35;
  --leading-normal:      1.5;
  --leading-relaxed:     1.625;

  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-wider:      0.06em;

  /* ── SPACING (4px base grid) ────────────────────────── */
  --space-0:  0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:  0.25rem;    /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* ── RADII ──────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.03);
  --shadow-focus: 0 0 0 3px rgba(99,102,241,0.15);

  /* ── TRANSITIONS ────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     100ms;
  --dur-normal:   200ms;
  --dur-slow:     300ms;

  /* ── LAYOUT ─────────────────────────────────────────── */
  --nav-height:      52px;
  --page-max-width:  1440px;
  --page-padding-x:  var(--space-6);
  --card-padding:    var(--space-5);
  --section-gap:     var(--space-6);

  /* ── CHART COLORS (for Lightweight Charts config) ───── */
  --chart-bg:             #FFFFFF;
  --chart-text:           #6B7280;
  --chart-grid:           #F1F3F6;
  --chart-crosshair:      #9CA3AF;
  --chart-up-body:        #10B981;
  --chart-up-border:      #059669;
  --chart-up-wick:        #059669;
  --chart-down-body:      #F43F5E;
  --chart-down-border:    #E11D48;
  --chart-down-wick:      #E11D48;
  --chart-volume-up:      rgba(16,185,129,0.3);
  --chart-volume-down:    rgba(244,63,94,0.3);
}