/* ============================================================
   base.css — reset, body defaults, app-level :root tokens, typography utilities
   ============================================================ */

:root {
  /* Legacy color names mapped onto the global design tokens (see tokens.css).
     --text-primary / --text-secondary come straight from tokens.css. */
  --bg-primary:    var(--bg-base);
  --bg-secondary:  var(--bg-surface);
  --bg-tertiary:   var(--bg-elevated);
  --border:        var(--border-default);
  --text-muted:    var(--text-tertiary);
  --accent-blue:   var(--accent);
  --accent-green:  var(--positive);
  --accent-red:    var(--negative);
  --accent-orange: var(--accent);
  --accent-purple: var(--accent);
  --accent-cyan:   var(--positive);

  /* Structural tokens (non-color) — sharp corners read as precision. */
  --sidebar-width: 252px;
  --radius: 2px;
  --radius-lg: 3px;
  --transition: all 0.2s ease;

  color-scheme: dark;   /* native date pickers, selects & scrollbars render dark */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain over the whole app — the same texture as the landing page,
   barely-there, so the dark field reads as material rather than void. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(200, 169, 126, 0.32); color: #FDF8F0; }

/* Keyboard focus — one thin gold ring, nothing else. */
.btn:focus-visible, .tab:focus-visible, .curr-btn:focus-visible,
.seg-btn:focus-visible, .nav-item:focus-visible, .curr-pick-btn:focus-visible,
.modal-close:focus-visible {
  outline: 1px solid rgba(200, 169, 126, 0.65);
  outline-offset: 2px;
}


/* ─── Typography scale (reusable utility classes) ─────── */
/* Document the design system's type roles as composable classes.
   Values mirror tokens.css; safe to apply to any element. */
.text-display  { font-family: var(--font-display); font-weight: 300; }
.text-data     { font-family: var(--font-data);    font-weight: 300; }
.text-ui       { font-family: var(--font-ui);       font-weight: 400; }
.text-label    { font-family: var(--font-data); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; }
.text-ticker   { font-family: var(--font-data); font-size: 0.8125rem; font-weight: 500; color: var(--accent); }
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }