/* ===========================================================
   SYNTHEDGE — DESIGN TOKENS
   File: css/variables.css

   COLOR RATIONALE (so you can sanity-check this against
   competitors like FTMO, FundedNext, The5ers, Funding Pips):

   - Base: deep navy-charcoal, NOT pure black. Pure black reads
     cheap/harsh on screens and fails accessibility contrast
     nuance. Navy is the actual industry standard for finance/
     trading platforms — it signals "serious institution" the
     way black signals "nightclub."
   - Primary accent: GREEN. This is deliberate, not decorative.
     In trading UI, green = profit/funded/go. Every major prop
     firm and broker uses green as their primary "positive
     action" color because traders are pre-conditioned to read
     green as "good" from candlestick charts. Using orange or
     purple as PRIMARY fights that existing mental model.
   - Secondary accent: amber/gold, used sparingly for "premium"
     and warnings — never for primary CTAs.
   - Danger: red, reserved strictly for losses/breaches/destructive
     actions. Never decorative.

   This file has NO selectors, only variables. Every other CSS
   file in this project imports/assumes these.
   =========================================================== */

:root {

  /* ---------- BASE SURFACES (navy, not black) ---------- */
  --bg-base:        #0B1120;   /* page background */
  --bg-raised:       #111A2E;   /* section background, sidebar */
  --bg-card:         #16213A;   /* card surfaces */
  --bg-card-hover:   #1B2944;   /* hover state for cards */
  --bg-input:        #0E1726;   /* form input background */

  /* ---------- BORDERS ---------- */
  --border:          #233252;
  --border-soft:     #1A2540;
  --border-strong:   #2E4068;

  /* ---------- TEXT ---------- */
  --text-1:          #F1F4F9;   /* primary text */
  --text-2:          #9AA7C2;   /* secondary text */
  --text-3:          #5E6B8A;   /* muted/tertiary text */
  --text-on-accent:  #07140E;   /* text placed on top of the green accent */

  /* ---------- PRIMARY ACCENT: GREEN (profit / funded / go) ---------- */
  --green:           #1FCB6B;
  --green-hi:        #36DE7E;   /* hover state */
  --green-soft:      rgba(31, 203, 107, 0.12);
  --green-glow:      rgba(31, 203, 107, 0.35);
  --green-border:    rgba(31, 203, 107, 0.30);

  /* ---------- SECONDARY ACCENT: AMBER/GOLD (premium, attention) ---------- */
  --amber:           #F2B84B;
  --amber-soft:      rgba(242, 184, 75, 0.12);
  --amber-border:    rgba(242, 184, 75, 0.30);

  /* ---------- TERTIARY: BLUE (trust, info, links) ---------- */
  --blue:            #4C8DFF;
  --blue-soft:       rgba(76, 141, 255, 0.12);

  /* ---------- DANGER: RED (loss / breach / destructive only) ---------- */
  --red:             #F2495C;
  --red-soft:        rgba(242, 73, 92, 0.12);
  --red-border:      rgba(242, 73, 92, 0.30);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:    'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', 'Courier New', monospace;

  /* Type scale — fixed steps, not arbitrary px everywhere */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14.5px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;

  /* ---------- SPACING SCALE (4px base unit) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADIUS ---------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 999px;

  /* ---------- SHADOWS (navy-tinted, not pure black) ---------- */
  --shadow-sm: 0 1px 2px rgba(4, 8, 18, 0.4);
  --shadow-md: 0 4px 16px rgba(4, 8, 18, 0.45);
  --shadow-lg: 0 12px 40px rgba(4, 8, 18, 0.5);
  --shadow-glow-green: 0 0 28px var(--green-glow);

  /* ---------- LAYOUT ---------- */
  --max-w:     1200px;
  --nav-h:     72px;
  --sidebar-w: 248px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

/* ---------- REDUCED MOTION (accessibility, also security-adjacent:
   predictable UI for screen readers / assistive tech) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}