/* =========================================================================
   TRADEWOLK — Colors & Type
   A trading journal that reads like a captain's log. Paper-and-ink base,
   amber signal, disciplined semantic reds/greens, tabular numerics.
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color — Neutrals (paper & ink) ---------- */
  --paper:       #F7F4ED;   /* warm off-white, the page */
  --paper-2:     #EFEBE1;   /* slight tint, sections */
  --paper-3:     #E6E1D4;   /* cards on paper */
  --ink:         #0E0E0C;   /* near-black, the logo color */
  --ink-2:       #1C1C19;   /* elevated dark surfaces */
  --ink-3:       #2A2A26;   /* borders in dark mode */

  /* ---------- Color — Foregrounds / Backgrounds ---------- */
  --bg:          var(--paper);
  --bg-elev:     #FFFFFF;
  --bg-sunk:     var(--paper-2);
  --fg1:         var(--ink);        /* primary text */
  --fg2:         #45443F;           /* secondary */
  --fg3:         #75736B;           /* tertiary / metadata */
  --fg4:         #A6A399;           /* disabled / watermark */

  /* ---------- Color — Lines ---------- */
  --line:        rgba(14, 14, 12, 0.12);
  --line-strong: rgba(14, 14, 12, 0.24);
  --line-faint:  rgba(14, 14, 12, 0.06);

  /* ---------- Color — Brand signal (amber) ---------- */
  --signal:      #E8A33D;   /* amber, restrained gold */
  --signal-ink:  #8A5A10;   /* for text on paper */
  --signal-bg:   #FBEBC9;   /* signal background fills */

  /* ---------- Color — Semantic P&L ---------- */
  --win:         #2F7D4F;   /* forest green, not neon */
  --win-bg:      #DCEADD;
  --loss:        #B23A2A;   /* iron oxide red */
  --loss-bg:     #F2D9D3;
  --flat:        #7A7870;   /* scratch trades */

  /* ---------- Color — AI / Insight accent ---------- */
  --insight:     #3A4E7A;   /* ink-blue, for AI surfaces */
  --insight-bg:  #DDE3EF;

  /* ---------- Typography ---------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Radii ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- Shadows ---------- */
  --shadow-0: 0 1px 0 rgba(14,14,12,0.04);
  --shadow-1: 0 1px 2px rgba(14,14,12,0.06), 0 0 0 1px rgba(14,14,12,0.05);
  --shadow-2: 0 4px 14px rgba(14,14,12,0.08), 0 0 0 1px rgba(14,14,12,0.06);
  --shadow-3: 0 18px 40px rgba(14,14,12,0.14), 0 0 0 1px rgba(14,14,12,0.08);
  --inset-line: inset 0 0 0 1px var(--line);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
}

/* ---------- Dark (night terminal) ---------- */
:root.dark, .dark {
  --bg:          var(--ink);
  --bg-elev:     var(--ink-2);
  --bg-sunk:     #060605;
  --fg1:         #F1ECDE;
  --fg2:         #B8B3A4;
  --fg3:         #85817A;
  --fg4:         #53514C;
  --line:        rgba(241, 236, 222, 0.10);
  --line-strong: rgba(241, 236, 222, 0.22);
  --line-faint:  rgba(241, 236, 222, 0.05);
  --signal-bg:   #3A2A0F;
  --win-bg:      #14321E;
  --loss-bg:     #3A1714;
  --insight-bg:  #1A2240;
}

/* ---------- Semantic element styles ---------- */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fg1);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}

p, .p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--fg1);
}

.mono, code, kbd, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

.num { letter-spacing: -0.01em; }

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg3);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-5) 0;
}

/* ---------- P&L helpers ---------- */
.pl-pos { color: var(--win); }
.pl-neg { color: var(--loss); }
.pl-flat { color: var(--flat); }

/* ---------- Selection ---------- */
::selection { background: var(--signal); color: var(--ink); }