/* ============================================================
   IntelliBull Design System — Foundations
   Colors, typography, spacing, radius, shadow, motion
   ============================================================ */

/* --- Fonts -------------------------------------------------- */
/* Substitutions flagged: We'd ideally license a custom grotesque
   like Söhne or NB International. Using Google Fonts equivalents:
   - Display/UI: Inter Tight (close to Söhne Breit)
   - Body: Inter
   - Mono: JetBrains Mono (numerics + code)
   - Serif accent: Instrument Serif (editorial pull-quotes)
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* === COLORS — Brand ===================================== */
  /* Bull green — primary brand. Confident, not retail-app loud. */
  --bull-50:  #ECFDF3;
  --bull-100: #D1FADF;
  --bull-200: #A6F4C5;
  --bull-300: #6CE9A6;
  --bull-400: #32D583;
  --bull-500: #12B76A;   /* primary */
  --bull-600: #039855;
  --bull-700: #027A48;
  --bull-800: #05603A;
  --bull-900: #054F31;

  /* Bear red — semantic only, for losses / destructive */
  --bear-50:  #FEF3F2;
  --bear-100: #FEE4E2;
  --bear-300: #FDA29B;
  --bear-500: #F04438;
  --bear-600: #D92D20;
  --bear-700: #B42318;

  /* Capital — warm gold accent for premium / highlights */
  --capital-300: #FEC84B;
  --capital-500: #F79009;
  --capital-700: #B54708;

  /* === COLORS — Neutrals (institutional, slightly cool) === */
  --ink-0:    #FFFFFF;
  --ink-25:   #FCFCFD;
  --ink-50:   #F8F9FB;
  --ink-100:  #F2F4F7;
  --ink-200:  #E4E7EC;
  --ink-300:  #D0D5DD;
  --ink-400:  #98A2B3;
  --ink-500:  #667085;
  --ink-600:  #475467;
  --ink-700:  #344054;
  --ink-800:  #1D2939;
  --ink-900:  #101828;
  --ink-950:  #0B1320;
  --ink-1000: #060B14;   /* terminal black */

  /* === COLORS — Semantic (light theme default) ============ */
  --bg:          var(--ink-0);
  --bg-subtle:   var(--ink-50);
  --bg-muted:    var(--ink-100);
  --bg-inverse:  var(--ink-1000);
  --surface:     var(--ink-0);
  --surface-raised: var(--ink-0);

  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-500);
  --fg-disabled: var(--ink-400);
  --fg-inverse:  var(--ink-0);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--bull-500);

  --accent:        var(--bull-500);
  --accent-hover:  var(--bull-600);
  --accent-press:  var(--bull-700);
  --accent-fg:     #ffffff;
  --accent-subtle: var(--bull-50);

  --positive:    var(--bull-600);
  --positive-bg: var(--bull-50);
  --negative:    var(--bear-600);
  --negative-bg: var(--bear-50);
  --warning:     var(--capital-500);

  /* === Typography ========================================= */
  --font-display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;

  /* Base scale — slightly tight, capital-markets feel */
  --text-xs:    11px;   --lh-xs:    16px;
  --text-sm:    13px;   --lh-sm:    18px;
  --text-base:  14px;   --lh-base:  20px;
  --text-md:    15px;   --lh-md:    22px;
  --text-lg:    17px;   --lh-lg:    24px;
  --text-xl:    20px;   --lh-xl:    28px;
  --text-2xl:   24px;   --lh-2xl:   30px;
  --text-3xl:   30px;   --lh-3xl:   36px;
  --text-4xl:   38px;   --lh-4xl:   44px;
  --text-5xl:   52px;   --lh-5xl:   56px;
  --text-6xl:   72px;   --lh-6xl:   76px;
  --text-7xl:   96px;   --lh-7xl:   96px;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-mono-caps: 0.06em;

  /* === Spacing (4px base) ================================= */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* === Radius — restrained, not playful =================== */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* === Shadows — flat with crisp 1px borders ============== */
  /* Institutional brands lean on hairlines + low elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 8px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0 8px 16px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.12);
  --shadow-glow-bull: 0 0 0 4px rgba(18, 183, 106, 0.16);
  --shadow-inner: inset 0 1px 2px rgba(16, 24, 40, 0.06);

  /* === Motion ============================================= */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* === Layout ============================================= */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* --- Dark theme (terminal) -------------------------------- */
[data-theme="dark"] {
  --bg:          var(--ink-1000);
  --bg-subtle:   var(--ink-950);
  --bg-muted:    var(--ink-900);
  --bg-inverse:  var(--ink-0);
  --surface:     var(--ink-950);
  --surface-raised: var(--ink-900);

  --fg:          var(--ink-50);
  --fg-muted:    var(--ink-300);
  --fg-subtle:   var(--ink-400);
  --fg-disabled: var(--ink-600);
  --fg-inverse:  var(--ink-900);

  --border:        #1F2A3D;
  --border-strong: #2A3A55;
  --accent-subtle: rgba(18, 183, 106, 0.12);
  --positive-bg:   rgba(18, 183, 106, 0.12);
  --negative-bg:   rgba(240, 68, 56, 0.14);
}

/* --- Scrollbars ------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--bg);
}

*::-webkit-scrollbar-corner {
  background: var(--bg);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--border-strong), var(--ink-600));
  border: 3px solid var(--bg);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ink-400), var(--ink-500));
}

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--bull-600), var(--bull-700));
}

*::-webkit-scrollbar-track-piece {
  background: transparent;
}

/* === Semantic element styles ============================== */
/* Reset just enough to make these usable on bare HTML */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--fg-muted);
}

p, .body { font-size: var(--text-base); line-height: var(--lh-base); margin: 0; }
.body-lg { font-size: var(--text-md); line-height: var(--lh-md); }
.body-sm { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); }

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'tnum', 'zero';
}

.tabular { font-variant-numeric: tabular-nums; }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Numeric tickers — always tabular, slightly tighter */
.ticker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ticker.up   { color: var(--positive); }
.ticker.down { color: var(--negative); }

/* Selection */
::selection { background: var(--bull-200); color: var(--ink-900); }