@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;700;800&display=swap');

/* ============================================================
   ScripTrdr design tokens
   Every screen is built against these semantic variables.
   A "theme" is just a set of values for them.
   Never hard-code a colour in a component — always use var(--…).
   ============================================================ */

:root {
  /* radii + motion (can be overridden per theme, e.g. Terminal = 0) */
  --radius:      14px;
  --radius-sm:   5px;
  --radius-pill: 999px;
  --speed:       .22s;

  /* typography (themes may swap --font to mono, etc.) */
  --font:       "Inter", "Segoe UI", system-ui, sans-serif;
  --font-brand: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;  /* wordmark + headings (condensed, uppercase) */
  --mono:       "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* spacing scale (theme-independent) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

/* ---------- GOLD (brand default — dark, Strava-style) ---------- */
/* ---------- DARK (deep near-black — ReBody-inspired) ---------- */
[data-theme="dark"] {
  --bg:            #0C0D10;   /* ReBody near-black */
  --surface:       #15171B;
  --surface-2:     #1C1F24;
  --border:        #282C33;
  --border-strong: #3A3E47;
  --text:          #F2F3F5;
  --text-muted:    #969AA2;
  --text-dim:      #62656D;
  --accent:        #CDA24E;   /* ReBody warm amber-gold */
  --accent-ink:    #1A1200;   /* text on amber fills */
  --accent-2:      #4C8DFF;
  --pos:           #2FBF71;
  --neg:           #F04444;
  --warn:          #E0B85E;
  --info:          #4C8DFF;
  --chart-grid:    #1E2127;
  --elev:          none;
  --radius:        12px;
  --font:          "Inter","Segoe UI",system-ui,sans-serif;
}

/* ---------- ONYX GOLD (premium — Elite unlock) ---------- */

/* ---------- LIGHT (Gold white mode — DEFAULT / daylight) ---------- */
[data-theme="light"] {
  --bg:            #FCFCFC;   /* lighter + neutral (less cream) */
  --surface:       #FFFFFF;
  --surface-2:     #F3F3F4;
  --border:        #E9E9EB;
  --border-strong: #D8D8DB;
  --text:          #1A1B1E;
  --text-muted:    #5F6169;
  --text-dim:      #9A9CA3;
  --accent:        #B8890B;   /* deep gold — passes contrast on white (fills + text) */
  --accent-ink:    #FFFFFF;
  --accent-2:      #2E6BFF;
  --pos:           #12924F;
  --neg:           #D22B2B;
  --warn:          #B8890B;
  --info:          #2E6BFF;
  --chart-grid:    #ECECEE;
  --elev:          0 1px 3px rgba(0,0,0,.06);
  --radius:        12px;
  --font:          "Inter","Segoe UI",system-ui,sans-serif;
}

/* ---------- ORANGE (near-black + Bloomberg orange accent) ---------- */
[data-theme="orangedark"] {
  --bg:            #0C0D10;
  --surface:       #15171B;
  --surface-2:     #1C1F24;
  --border:        #282C33;
  --border-strong: #3A3E47;
  --text:          #F2F3F5;
  --text-muted:    #969AA2;
  --text-dim:      #62656D;
  --accent:        #FF7A00;   /* Bloomberg terminal orange */
  --accent-ink:    #1A1200;   /* dark text on bright-orange fills */
  --accent-2:      #4C8DFF;
  --pos:           #2FBF71;
  --neg:           #F04444;
  --warn:          #FF7A00;
  --info:          #4C8DFF;
  --chart-grid:    #1E2127;
  --elev:          none;
  --radius:        12px;
  --font:          "Inter","Segoe UI",system-ui,sans-serif;
}

/* ---------- ORANGE LIGHT (white + deep orange accent) ---------- */
[data-theme="orangelight"] {
  --bg:            #FCFCFC;   /* lighter + neutral (less warm tint) */
  --surface:       #FFFFFF;
  --surface-2:     #F3F3F4;
  --border:        #E9E9EB;
  --border-strong: #D8D8DB;
  --text:          #1A1B1E;
  --text-muted:    #5F6169;
  --text-dim:      #9A9CA3;
  --accent:        #EA6A00;   /* brighter orange — closer to the dark theme's Bloomberg #FF7A00 */
  --accent-ink:    #FFFFFF;
  --accent-2:      #2E6BFF;
  --pos:           #12924F;
  --neg:           #D22B2B;
  --warn:          #EA6A00;
  --info:          #2E6BFF;
  --chart-grid:    #ECECEE;
  --elev:          0 1px 3px rgba(0,0,0,.06);
  --radius:        12px;
  --font:          "Inter","Segoe UI",system-ui,sans-serif;
}