/* Trade Like Shrimp: design and motion tokens, shared by the app
   (app.tradelikeshrimp.com) and the landing site (tradelikeshrimp.com).
   Edit the copy in shared/css, then run:  node scripts/sync-shared.mjs */
:root {
  /* ---- colour ---- */
  --bg: #0D0F12;                      /* page */
  --bg-sunk: #08090B;                 /* inputs, wells */
  --bg-deep: #040404;                 /* the logo video's own black */
  --surface: #15181D;                 /* cards: one step above the page */
  --surface-2: #1B1F25;               /* buttons, raised */
  --line: rgba(255, 255, 255, .06);   /* 1px card border */
  --line-2: rgba(255, 255, 255, .10);
  --fg: #ECEDEF;
  --fg-2: #B9BEC6;
  --muted: #8E949E;
  --gold: #D4A84B;                    /* primary actions + active states only */
  --gold-hi: #E6C27A;
  --gold-ink: #17130A;                /* text on gold */
  --gold-glow: rgba(212, 168, 75, .14);
  --silver: #C9CED6;
  --blue: #2F6BFF;                    /* small accents */
  --good: #3FB950;                    /* P/L only */
  --bad: #F0716B;                     /* P/L + destructive only */
  --danger: #D9443A;
  --warn: #E6A028;

  /* ---- shape + space ---- */
  --r-card: 12px;
  --r-btn: 10px;
  --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;

  /* ---- type: one stack, fluid sizes ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-body: clamp(15px, 14.6px + .1vw, 16px);
  --fs-lead: clamp(1.02rem, .95rem + .4vw, 1.25rem);
  --fs-h3: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  --fs-h2: clamp(1.65rem, 1.15rem + 2.1vw, 2.75rem);
  --fs-h1: clamp(2rem, 1.25rem + 3.4vw, 3.75rem);
  --fs-figure: clamp(2.1rem, 1.7rem + 1.8vw, 2.75rem);   /* equity and other hero numbers */

  /* ---- motion: only transform and opacity ever animate ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;                    /* press */
  --t-base: 220ms;                    /* toggles, toasts */
  --t-slow: 340ms;                    /* sheets, tabs */
  --t-reveal: 700ms;                  /* scroll entrances */
  --stagger: 60ms;
  --rise: 20px;                       /* entrance distance */
  --rise-sm: 8px;                     /* tab / small entrance distance */
  --press: .97;                       /* pressed scale */

  /* ---- device ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  color-scheme: dark;
}

/* Reduce motion: nothing travels or scales; changes are short fades. */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --rise-sm: 0px; --press: 1; --t-reveal: 200ms; --stagger: 0ms; }
}