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

/* Satoshi — PP Neue Montreal stand-in (license-clean) */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");
/* JetBrains Mono — tabular numerics & IDs */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ---- surfaces ---- */
  --bg:#FFFFFF;
  --canvas:#F7F7F8;
  --card:#FFFFFF;
  --line:#ECECF0;
  --line-strong:#E0E0E6;

  /* ---- ink ---- */
  --ink:#15151B;
  --dim:#5A5A66;
  --muted:#8A8A95;
  --faint:#B5B5BE;

  /* ---- coral (the only accent) ---- */
  --accent:#FF6B35;
  --accent-hover:#FF8557;
  --accent-deep:#E5511A;
  --accent-soft:#FFE9E0;
  --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:"JetBrains Mono","Geist 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-size:var(--fs-micro); font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; 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(-2px); box-shadow: var(--shadow-pop); }
}
/* 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); }