/* ==========================================================================
   Parallexus Swift — Design Tokens
   --------------------------------------------------------------------------
   Every color, font, and dimension used anywhere in Swift references these
   variables. Do not hardcode values in component CSS. Add to this file
   instead.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Colors — Background and surface
     Anchored to the Hex-Evo storefront palette for brand continuity.
     ------------------------------------------------------------------------ */
  --bg-primary:     #0A0E1A;   /* Page background, deep blue-black */
  --bg-surface:     #131826;   /* Panels, cards, raised areas */
  --bg-elevated:    #1A2033;   /* Modals, dropdowns, hover states */
  --bg-input:       #0F1421;   /* Form field backgrounds */

  /* ------------------------------------------------------------------------
     Colors — Text
     ------------------------------------------------------------------------ */
  --text-primary:   #D1D4DC;   /* Default body text, near-white */
  --text-secondary: #787B86;   /* Labels, captions, muted */
  --text-tertiary:  #4A4E5C;   /* Disabled, placeholder */
  --text-inverse:   #0A0E1A;   /* Text on bright backgrounds */

  /* ------------------------------------------------------------------------
     Colors — Semantic (financial register)
     Red = risk/loss, Green = safety/gain, Yellow = warning, Blue = info.
     Anchored to TradingView/Bloomberg standard palette.
     ------------------------------------------------------------------------ */
  --color-risk:     #EF5350;   /* Red — high risk, exposure, loss */
  --color-safety:   #26A69A;   /* Green — coverage, recovery, gain */
  --color-positive: #00C853;   /* S&P 500-style green — financial gain, opportunity */
  --color-warn:     #FFC107;   /* Yellow — caution, attention */
  --color-info:     #2962FF;   /* Blue — neutral information */

  /* ------------------------------------------------------------------------
     Colors — Parallexus brand accents
     Used sparingly: CTAs (bottom quarter), brand mark, dimensional indicator.
     ------------------------------------------------------------------------ */
  --brand-primary:  #26A69A;   /* For now, aligning with safety green
                                  — adjust when brand mark is finalized */
  --brand-accent:   #FFC107;   /* Secondary brand accent for highlights */

  /* ------------------------------------------------------------------------
     Colors — Borders and dividers
     ------------------------------------------------------------------------ */
  --border-subtle:  #2A2E39;   /* Almost invisible, for subtle separation */
  --border-default: #363A45;   /* Standard borders on form fields, cards */
  --border-strong:  #4A4E5C;   /* Emphasized borders, focus states */

  /* ------------------------------------------------------------------------
     Typography — Font families
     ------------------------------------------------------------------------ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono',
               monospace;

  /* ------------------------------------------------------------------------
     Typography — Sizes
     ------------------------------------------------------------------------ */
  --text-xs:   11px;   /* Captions, fine print */
  --text-sm:   13px;   /* Secondary body, labels */
  --text-base: 14px;   /* Default body */
  --text-md:   16px;   /* Emphasized body */
  --text-lg:   20px;   /* Subheadings */
  --text-xl:   28px;   /* Section headings */
  --text-2xl:  40px;   /* Page headings */
  --text-3xl:  56px;   /* Hero numbers (dollar amounts in report) */

  /* ------------------------------------------------------------------------
     Typography — Weights and line heights
     ------------------------------------------------------------------------ */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ------------------------------------------------------------------------
     Spacing — 4px base unit
     ------------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ------------------------------------------------------------------------
     Radius — Sharp, minimal
     ------------------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ------------------------------------------------------------------------
     Effects — Used very sparingly
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* ------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------ */
  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
}