/* ============================================================
   TITANS — base.css
   Tokens, reset, typography, scrollbar, selection
   ============================================================ */

/* Custom fonts (PP Neue Montreal — personal use trial).
   See /fonts/README.md for download. Falls back to Hanken Grotesk via Google. */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces (dark mode default) */
  --bg:           #0a0a0f;
  --bg-soft:      #0f0f15;
  --card:         #15151d;
  --card-hover:   #1c1c26;
  --line:         #22222d;
  --line-soft:    #1a1a23;
  --overlay:      rgba(10, 10, 15, 0.78);

  /* Text */
  --text:         #f4f4f8;
  --text-dim:     #b5b5c0;
  --muted:        #84848f;
  --faint:        #5a5a64;

  /* Brand — Coral Orange (default accent) */
  --accent:       #FF6B35;
  --accent-hover: #FF8557;
  --accent-deep:  #E5511A;
  --accent-soft:  rgba(255, 107, 53, 0.12);
  --accent-glow:  rgba(255, 107, 53, 0.35);
  --accent-text:  #0a0a0f; /* readable on coral */

  /* Semantic */
  --good:         #2bd47b;
  --good-soft:    rgba(43, 212, 123, 0.12);
  --warn:         #f0b400;
  --warn-soft:    rgba(240, 180, 0, 0.12);
  --bad:          #ff5e57;
  --bad-soft:     rgba(255, 94, 87, 0.12);
  --info:         #5b9eff;
  --info-soft:    rgba(91, 158, 255, 0.12);

  /* Niche palette (for thumbnail gradients) */
  --niche-supplements: 142 60% 18%;
  --niche-beauty:      330 70% 22%;
  --niche-fitness:     20 70% 22%;
  --niche-fashion:     280 55% 22%;
  --niche-lifestyle:   200 50% 20%;
  --niche-tech:        220 55% 20%;
  --niche-home:        40 50% 22%;
  --niche-food:        15 70% 22%;

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;

  /* Density */
  --row-h:        36px;
  --row-h-comfy:  44px;
  --body-size:    14px;

  /* Motion */
  --t-fast: 100ms;
  --t-base: 160ms;
  --t-slow: 260ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1);

  /* Fonts */
  --font-ui:   "PP Neue Montreal", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* Layout */
  --nav-h:       64px;
  --app-nav-h:   56px;
  --sidebar-w:   240px;
  --ticker-h:    16px;
  --max-mkt:     1280px;
  --max-app:     1440px;
}

/* Light mode (opt-in only) */
[data-theme="light"] {
  --bg:           #fafafa;
  --bg-soft:      #f1f1f5;
  --card:         #ffffff;
  --card-hover:   #f4f4f8;
  --line:         #d9d9e0;
  --line-soft:    #e8e8ee;
  --overlay:      rgba(250, 250, 250, 0.85);
  --text:         #0a0a0f;
  --text-dim:     #2a2a32;
  --muted:        #56565f;
  --faint:        #8a8a93;
  --accent-text:  #ffffff;
}
[data-theme="light"] .chip,
[data-theme="light"] .filter-chip,
[data-theme="light"] .hero-eyebrow {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .badge-new {
  background: rgba(0,0,0,0.04); color: var(--text-dim);
}

/* Accent variants (Tweaks panel) */
[data-accent="pink"]  { --accent:#EC4899; --accent-hover:#F472B6; --accent-deep:#BE185D;
                        --accent-soft:rgba(236,72,153,0.12); --accent-glow:rgba(236,72,153,0.35); }
[data-accent="blue"]  { --accent:#5B9EFF; --accent-hover:#7DB3FF; --accent-deep:#2E7AE0;
                        --accent-soft:rgba(91,158,255,0.12); --accent-glow:rgba(91,158,255,0.35); }
[data-accent="green"] { --accent:#2BD47B; --accent-hover:#48DD8E; --accent-deep:#1AA15A;
                        --accent-soft:rgba(43,212,123,0.12); --accent-glow:rgba(43,212,123,0.35); }

/* Density alt */
[data-density="comfortable"] {
  --row-h: 44px;
  --body-size: 15px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
[data-theme="light"] html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
/* Dense data surfaces (app shell + tables): tighter line-height */
.app-content,
.app-sidebar,
.dt,
.dt-wrap {
  line-height: 1.45;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============================================================
   Typography scale
   ============================================================ */
.t-display-xl { font-size: clamp(40px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.t-display    { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.t-h1         { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.t-h2         { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.t-h3         { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; color: var(--muted); }
.t-body       { font-size: 14px; font-weight: 400; line-height: 1.55; }
.t-body-lg    { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--text-dim); }
.t-small      { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; }
.t-caption    { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; color: var(--muted); }
.t-mono       { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.005em; }
.t-num        { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.dim  { color: var(--text-dim); }
.muted{ color: var(--muted); }
.faint{ color: var(--faint); }

/* ============================================================
   Scrollbar
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   Selection
   ============================================================ */
::selection { background: var(--accent-soft); color: var(--text); }

/* ============================================================
   Focus
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline-offset: 3px; }

/* ============================================================
   Utilities
   ============================================================ */
.row    { display: flex; align-items: center; gap: 8px; }
.col    { display: flex; flex-direction: column; }
.between{ display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.grow   { flex: 1; }
.gap-2  { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.px-3 { padding-left: 12px; padding-right: 12px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-6 { padding-left: 24px; padding-right: 24px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-8 { padding-top: 32px; padding-bottom: 32px; } .py-12 { padding-top: 48px; padding-bottom: 48px; }
.hidden { display: none !important; }
.shrink-0 { flex-shrink: 0; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.container-mkt { max-width: var(--max-mkt); margin-inline: auto; padding-inline: 24px; }
.container-app { max-width: var(--max-app); margin-inline: auto; padding-inline: 24px; }

@media (max-width: 768px) {
  .container-mkt, .container-app { padding-inline: 16px; }
}

/* ============================================================
   Accessibility
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--accent); color: var(--accent-text);
  padding: 8px 12px; border-radius: var(--r-2); font-weight: 600;
  z-index: 9999; transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}