/* Pipsly: design and motion tokens, shared by the app (app.pipsly.app) and the site (pipsly.app).
   Strictly monochrome: black, graphite, chrome, white. Green/red only for live P/L and price up/down.
   Edit the copy in shared/css, then run:  node scripts/sync-shared.mjs */
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root {
  /* ---- brand palette ---- */
  --black: #0A0A0A;
  --graphite: #1A1C1F;
  --graphite-2: #3A3D42;
  --chrome: #C9CCD1;
  --white: #FFFFFF;

  /* ---- colour roles ---- */
  --bg: #0A0A0A;                      /* page */
  --bg-sunk: #050506;                 /* inputs, wells */
  --bg-deep: #000000;
  --surface: #121315;                 /* cards: one step above the page */
  --surface-2: #1A1C1F;               /* buttons, raised */
  --line: rgba(255, 255, 255, .07);   /* 1px card border */
  --line-2: rgba(255, 255, 255, .12);
  --fg: #F4F5F6;
  --fg-2: #C9CCD1;
  --muted: #8D9198;
  /* "accent" = the primary action: a white-to-chrome face with black text. */
  --accent: #FFFFFF;
  --accent-2: #C9CCD1;
  --accent-ink: #0A0A0A;
  --accent-glow: rgba(201, 204, 209, .16);
  --silver: #C9CCD1;
  --blue: #9EA3AB;                    /* small accents (graphite-chrome, never blue) */
  --good: #3FB950;                    /* live P/L and price up only */
  --bad: #F0716B;                     /* live P/L and price down only */
  --danger: #E9EAEC;                  /* destructive actions: bright outline, never red */
  --warn: #C9CCD1;

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

  /* ---- type: Instrument Serif for big headlines, Inter for text, JetBrains Mono for numbers ---- */
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains 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.75rem, 1.2rem + 2.3vw, 3rem);
  --fs-h1: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  --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; }
}