/* ============================================================
   TikTok Titans — Design Tokens (single source of truth)
   White + coral, hairlines over shadows, tabular numerics.
   ============================================================ */

/* Fonts (Satoshi + JetBrains Mono) load via <link> tags in index.html —
   CSS @import would serialize them behind this stylesheet. */

:root {
  /* ---- surfaces (warm off-white base — euka steal) ---- */
  --bg:#FFFFFF;
  --canvas:#FBFAF8;
  --card:#FFFFFF;
  --card-hover:#FFF4F2;
  --section:#F5F4F1;
  --line:#EBE8E3;
  --line-strong:#DEDAD3;

  /* ---- ink (warm) ---- */
  --ink:#1A1614;
  --dim:#3D3533;
  --muted:#6B6460;
  --faint:#AFACA6;

  /* ---- coral (the spine — deepened) ---- */
  --accent:#FF6B5B;
  --accent-hover:#FF8A7A;
  --accent-deep:#E84C3C;
  --accent-soft:#FFE8E5;
  --accent-tint:#FFF4F2;
  --accent-glow:rgba(255,107,91,.34);
  --on-accent:#FFFFFF;

  /* ---- semantic ---- */
  --good:#16A34A;
  --warn:#D97706;
  --bad:#DC2626;
  --info:#2563EB;

  /* ---- 8 niche pastel dots (chips only, never fills) ---- */
  --niche-1:#E9A8C9; /* beauty   */
  --niche-2:#A8C7E9; /* tech     */
  --niche-3:#A8E9C0; /* wellness */
  --niche-4:#E9DCA8; /* home     */
  --niche-5:#C9A8E9; /* fashion  */
  --niche-6:#E9C0A8; /* kitchen  */
  --niche-7:#A8E9E4; /* fitness  */
  --niche-8:#D6E9A8; /* pets     */

  /* ---- type ---- */
  --font-ui:"Satoshi","PP Neue Montreal",-apple-system,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;

  --fs-display:40px;
  --fs-h1:25px;
  --fs-h2:19px;
  --fs-h3:16px;
  --fs-body:14px;
  --fs-small:12.5px;
  --fs-micro:11px;

  /* ---- spacing ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;

  /* ---- radii ---- */
  --r-sm:6px; --r-md:8px; --r-lg:11px;

  /* ---- borders + shadow ---- */
  --hair:1px solid var(--line);
  --hair-strong:1px solid var(--line-strong);
  --shadow-card:0 1px 2px rgba(20,20,27,.04);
  --shadow-pop:0 8px 28px -8px rgba(20,20,27,.16), 0 2px 6px rgba(20,20,27,.06);

  /* ---- layout ---- */
  --sidebar-w:236px;
  --rail-w:312px;
  --topbar-h:56px;
  --maxw:1280px;
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  padding:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* tabular figures everywhere numbers appear */
.tnum, table, .mono { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

h1,h2,h3,h4,p { margin:0; }

button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

::selection { background:var(--accent-soft); color:var(--accent-deep); }

/* ---- type helpers ---- */
.display { font-size:var(--fs-display); font-weight:800; line-height:1.06; letter-spacing:-0.02em; }
.h1 { font-size:var(--fs-h1); font-weight:700; line-height:1.1; letter-spacing:-0.015em; }
.h2 { font-size:var(--fs-h2); font-weight:700; line-height:1.15; letter-spacing:-0.01em; }
.h3 { font-size:var(--fs-h3); font-weight:600; line-height:1.2; }
.body { font-size:var(--fs-body); font-weight:400; }
.small { font-size:var(--fs-small); }
.eyebrow {
  font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--muted);
}
.dim { color:var(--dim); }
.muted { color:var(--muted); }
.faint { color:var(--faint); }

/* ---- scrollbars (subtle) ---- */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:99px; border:3px solid var(--canvas); }
*::-webkit-scrollbar-track { background:transparent; }

/* ---- focus ---- */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---- skeleton shimmer ---- */
@keyframes tt-shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
.skeleton {
  background:linear-gradient(90deg, #EEEEF1 0%, #F4F4F6 50%, #EEEEF1 100%);
  background-size:200% 100%;
  animation:tt-shimmer 1.3s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation:none; }
  * { scroll-behavior:auto !important; }
}

/* ---- coral realtime pulse (only when truly connected) ---- */
@keyframes tt-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.live-dot { width:7px; height:7px; border-radius:99px; background:var(--accent); animation:tt-pulse 1.8s ease-in-out infinite; }

/* ---- generic transitions (state only) ---- */
.t-fast { transition:all .12s ease; }
.t-med { transition:all .18s ease; }

/* ---- hairline divider ---- */
.hr { height:1px; background:var(--line); border:0; margin:0; }

/* ============================================================
   PREMIUM MOTION SYSTEM — easings, tactile press, stagger, lift
   ============================================================ */
:root{
  --ease-standard: cubic-bezier(.4,0,.2,1);   /* hovers / colors */
  --ease-modal: cubic-bezier(.16,1,.3,1);     /* overlays (expo-out) */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);/* the "pop" */
}
@media (prefers-reduced-motion: no-preference){
  /* tactile press feedback on every button */
  button:not(:disabled){ transition: transform .11s var(--ease-standard), background-color .14s var(--ease-standard), box-shadow .14s var(--ease-standard), color .14s var(--ease-standard), opacity .14s var(--ease-standard); }
  button:not(:disabled):active{ transform: scale(.96); }
  a, [role="button"]{ transition: color .14s var(--ease-standard), background-color .14s var(--ease-standard), opacity .14s var(--ease-standard); }

  /* staggered entrance for grids/lists (apply .tt-stagger to the container) */
  @keyframes tt-rise { from{ opacity:0; transform: translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
  .tt-stagger > * { animation: tt-rise .42s var(--ease-spring) both; will-change: transform, opacity; }
  .tt-stagger > *:nth-child(1){animation-delay:0ms}
  .tt-stagger > *:nth-child(2){animation-delay:35ms}
  .tt-stagger > *:nth-child(3){animation-delay:70ms}
  .tt-stagger > *:nth-child(4){animation-delay:105ms}
  .tt-stagger > *:nth-child(5){animation-delay:140ms}
  .tt-stagger > *:nth-child(6){animation-delay:175ms}
  .tt-stagger > *:nth-child(7){animation-delay:210ms}
  .tt-stagger > *:nth-child(8){animation-delay:245ms}
  .tt-stagger > *:nth-child(9){animation-delay:280ms}
  .tt-stagger > *:nth-child(10){animation-delay:315ms}
  .tt-stagger > *:nth-child(11){animation-delay:350ms}
  .tt-stagger > *:nth-child(12){animation-delay:385ms}
  .tt-stagger > *:nth-child(n+13){animation-delay:420ms}

  /* opt-in hover lift */
  .tt-lift{ transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard); }
  .tt-lift:hover{ transform: translateY(-3px) scale(1.012); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }

  /* premium dropdown / popover entrance (expo-out) */
  @keyframes tt-pop-in { from { opacity:0; transform: translateY(-7px) scale(.96); } to { opacity:1; transform:none; } }
  .tt-pop-in { animation: tt-pop-in .17s var(--ease-modal) both; transform-origin: top center; }
}
/* upgrade the generic transition helpers to the premium easing */
.t-fast { transition: all .12s var(--ease-standard); }
.t-med  { transition: all .18s var(--ease-standard); }

/* ---- layout safety: a rogue wide child must never push the page sideways ---- */
main { overflow-x: clip; }

/* ============================================================
   PREMIUM POLISH — display font, page transitions, tickers
   ============================================================ */
:root { --font-display:"Clash Display","Satoshi",-apple-system,sans-serif; }
.display { font-family:var(--font-display); letter-spacing:-0.015em; }

@media (prefers-reduced-motion: no-preference){
  /* route-change entrance — content rises in, never jars */
  @keyframes tt-page-enter { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
  .tt-page { animation: tt-page-enter .28s var(--ease-modal) both; }

  /* save-button pop */
  @keyframes tt-pop { 0%{ transform:scale(1); } 45%{ transform:scale(1.32) rotate(-6deg); } 100%{ transform:scale(1); } }
  .tt-pop { animation: tt-pop .34s var(--ease-spring); }

  /* marketing scroll reveal (class added by JS only — no-JS stays visible) */
  .mk-reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease-modal), transform .6s var(--ease-modal); }
  .mk-reveal.mk-in { opacity:1; transform:none; }
}

/* ============================================================
   REDESIGN LAYER (2026-06-13 build bible) — AI/gold tokens,
   gradients, utilities, dark-mode scaffold. The spine tokens
   above are re-mapped under [data-theme="dark"] so existing
   components theme automatically.
   ============================================================ */
:root{
  /* new-name aliases (build-bible spec) → same values as the spine */
  --color-coral:var(--accent); --color-coral-dark:var(--accent-deep);
  --color-coral-light:var(--accent-hover); --color-coral-glow:var(--accent-glow);
  --color-bg-base:var(--canvas); --color-bg-card:var(--card); --color-bg-card-hover:var(--card-hover);
  --color-ink-900:var(--ink); --color-ink-700:var(--dim); --color-ink-500:var(--muted); --color-ink-300:var(--faint);
  --color-border:var(--line); --color-border-strong:var(--line-strong);

  /* AI accent — cool violet, distinct from commerce coral */
  --ai:#7C3AED; --ai-soft:#EDE9FE; --ai-glow:rgba(124,58,237,.25);
  /* premium / upgrade gold */
  --gold:#F6CC8D; --gold-bg:#FFFBF0; --gold-ink:#8A6D2F;
  /* status badges (Kalodata bg-tint) */
  --up-text:#D92B2B; --up-bg:#FFECE8; --down-text:#16A34A; --down-bg:#ECFDF5;
  /* gradients */
  --grad-cta:linear-gradient(94deg,var(--accent-hover),var(--accent-deep));
  --grad-ai:linear-gradient(135deg,var(--ai),#4F46E5);
  --grad-card-head:linear-gradient(180deg,#FFE8E5,#FFFFFF);
  --grad-bloom:radial-gradient(90% 55% at 50% 115%,rgba(255,107,91,.30),transparent);
  /* glow shadows */
  --shadow-cta:0 12px 20px -7px var(--accent-glow);
  --shadow-ai:0 10px 24px -6px var(--ai-glow);
  --tracking-mono:0.13em;
}

/* dark mode — re-maps the spine tokens so existing components flip */
[data-theme="dark"]{
  --bg:#111113; --canvas:#0F0F11; --card:#161618; --card-hover:#1C1C20; --section:#0A0A0C;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --ink:#F1F0EE; --dim:#C7C5C2; --muted:#9A988F; --faint:#6B6760;
  --accent-soft:rgba(255,107,91,.12); --accent-tint:rgba(255,107,91,.08);
}

/* ---- mono microlabel (euka steal) ---- */
.micro{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.eyebrow-pill{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-mono); color:var(--accent-deep); background:var(--accent-soft); border-radius:99px; padding:3px 9px; }

/* ---- delta / status badges (Kalodata bg-tint) ---- */
.badge-delta{ font-family:var(--font-mono); font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:3px; }
.badge-up{ color:var(--up-text); background:var(--up-bg); }
.badge-down{ color:var(--down-text); background:var(--down-bg); }
.badge-ai{ color:var(--ai); background:var(--ai-soft); }
.badge-gold{ color:var(--gold-ink); background:var(--gold-bg); border:1px solid var(--gold); }

/* ---- buttons ---- */
.btn-primary{ background:var(--grad-cta); color:#fff; border:none; border-radius:99px; padding:9px 18px; font-weight:600; font-size:13.5px; box-shadow:var(--shadow-cta); transition:transform .12s var(--ease-spring), box-shadow .16s var(--ease-standard); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 26px -7px var(--accent-glow); }
.btn-ai{ background:var(--grad-ai); color:#fff; border:none; border-radius:99px; padding:9px 18px; font-weight:600; font-size:13.5px; box-shadow:var(--shadow-ai); }

/* ---- masked-data paywall (Kalodata steal) ---- */
.masked-value{ filter:blur(6px); user-select:none; pointer-events:none; opacity:.72; }

/* ---- sheet-glass (modals / drawers) ---- */
.glass{ background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(22px); border:1px solid var(--line); }

/* ---- live-dot pulsing halo (euka) ---- */
@keyframes tt-halo{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,107,91,.5);} 50%{ box-shadow:0 0 0 6px rgba(255,107,91,0);} }
.live-halo{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:tt-halo 2s ease-in-out infinite; }