/* ============================================================
   CONFLUENCE JOURNAL — "Warm Terminal"
   Trade blotter for ES/NQ confluence traders.
   Data-dense, precise, warm-neutral. Light + dark.
   ============================================================ */

/* ---- Fonts: Hanken Grotesk (UI) + Geist Mono (data) ---- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Signals — shared across themes, tuned warm but legible */
  --long:  #2f9e63;
  --long-soft: #2f9e6322;
  --short: #cf4636;
  --short-soft: #cf463622;
  --warn:  #c08a2c;
  --warn-soft: #c08a2c22;

  /* clay accent */
  --clay:  #b06a44;
  --clay-ink: #ffffff;

  --radius: 4px;
  --radius-lg: 8px;
  --rail-w: 232px;
  --hair: 1px;
}

/* ---------------- LIGHT (paper) ---------------- */
[data-theme="light"] {
  --bg:        #f1ede4;
  --panel:     #f8f5ee;
  --panel-2:   #fbf9f3;
  --inset:     #ebe6da;
  --border:    #ddd6c7;
  --border-2:  #e7e1d4;
  --ink:       #221f18;
  --ink-2:     #4a463c;
  --muted:     #8c8472;
  --faint:     #b3ab98;
  --clay-bg:   #b06a4416;
  --grid:      #e3ddcf;
  --shadow:    0 1px 0 #ffffffaa, 0 1px 3px #2a241612;
  --shadow-pop: 0 12px 40px -8px #2a241630, 0 2px 8px #2a241618;
}

/* ---------------- DARK (warm charcoal) ---------------- */
[data-theme="dark"] {
  --bg:        #14120c;
  --panel:     #1b1810;
  --panel-2:   #211e15;
  --inset:     #100e09;
  --border:    #322d20;
  --border-2:  #2a2619;
  --ink:       #efe9da;
  --ink-2:     #c5bda9;
  --muted:     #948b76;
  --faint:     #6b6450;
  --clay:      #c47b52;
  --clay-bg:   #c47b521c;
  --grid:      #greyfallback;
  --grid:      #251f15;
  --shadow:    0 1px 0 #ffffff06, 0 1px 2px #00000040;
  --shadow-pop: 0 18px 50px -10px #000000aa, 0 2px 8px #00000060;
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

::selection { background: var(--clay); color: #fff; }

/* thin scrollbars in the terminal spirit */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

input, button, textarea { font-family: inherit; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ---- shared atoms ---- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.tnum { font-variant-numeric: tabular-nums; }
.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.hairline { height: var(--hair); background: var(--border); border: 0; margin: 0; }

/* focus ring */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* No entrance animation on persistent content — visibility must never
   depend on an animation completing. Kept as a no-op hook. */
.fade-in { opacity: 1; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}