/* ============================================================================
   Loopr brand tokens — landing copy of the shared "Brand values"
   (.ai/features/brand-motion-system/SPEC.md). Same values as the app; the
   landing keeps its own file so it stays buildless. Change the brand in the
   SPEC first, then here and in apps/web/src/design/tokens/.
   Colour only ever means status: live = green, needs you = amber,
   got better / best = violet. Accent (links, focus, selection) = ink.
   ========================================================================== */

@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- dark (default) ---------- */
:root{
  color-scheme:dark;
  --bg:#0B0B0D; --surface:#141417; --surface-2:#1B1B1F;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --ink:#F4F4F2; --muted:#9A9A97;
  --meta:#878784;          /* faint text (meta labels) */
  --faint:#5E5E5C;         /* decoration only, never text */
  --btn-bg:#F4F4F2; --btn-fg:#0B0B0D;

  --live:#43B86A; --live-text:#43B86A;
  --need:#E8A93C; --need-text:#E8A93C;
  --best:#9D7CFF; --best-text:#9D7CFF;
  --err:#E85D57;
  --live-soft:rgba(67,184,106,.16); --best-soft:rgba(157,124,255,.14); --need-soft:rgba(232,169,60,.14); --err-soft:rgba(232,93,87,.14);

  --grain:.035;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-control:10px; --r-card:12px; --r-menu:14px; --r-modal:18px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:130ms; --t-base:200ms; --t-reveal:500ms; --t-draw:1250ms;

  --edge:clamp(20px,5vw,72px);
  --maxw:1320px;
  --pad-y:clamp(96px,14vw,168px);
}

/* ---------- light ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FAF9F6; --surface:#FFFFFF; --surface-2:#F3F2EE;
  --line:rgba(20,20,15,.10); --line-2:rgba(20,20,15,.16);
  --ink:#14140F; --muted:#6B6B66;
  --meta:#66665F;          /* faint text (meta labels) */
  --faint:#B5B5B0;
  --btn-bg:#14140F; --btn-fg:#FAF9F6;

  --live-text:#24713C; --need-text:#82570A; --best-text:#6C4FE0; --err:#B5352F;
  --live-soft:rgba(67,184,106,.16); --best-soft:rgba(157,124,255,.16); --need-soft:rgba(232,169,60,.18); --err-soft:rgba(181,53,47,.12);
  --grain:.045;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}