/* Design tokens for the /next/ site. Colour, motion and spacing come from the
   Preflop iOS app, not from taste: colour from AppTheme.swift, motion from
   PreflopMotion.swift, spacing from AppTheme.Spacing, and the rules from
   docs/DesignLanguage.md and .claude/rules/design.md.

   Two things deliberately LEAD the app (owner's decision, 2026-10-28, from the
   design explorer): the typeface is Hanken Grotesk, not Outfit, and the radii
   are 14 / 10 / 6, not 20 / 16 / 9. They are the new brand-wide design language;
   the app adopts them next, and until then these values are ahead of
   AppFont.swift and AppTheme.Radius. Everything else: change a value in the
   app first, then here.

   Rules that carry over:
   - No gradients. No dashed or dotted lines; a quiet edge is a solid hairline.
   - Two ambers. --accent-fill is bright and carries a label (buttons, chips);
     --accent-edge is its lip, the darker line along a button's bottom edge.
     --accent is amber drawn as text, a stroke or a dot. In dark the two are the
     same amber; in light --accent is a deeper gold (#946200, the brightest amber
     that still reads as 4.5:1 text on white) and --accent-fill stays bright.
   - Never white text on a panel: use --text, which is the scheme's own ink.
   - Green and red are spent colours: --good/--bad say correct or wrong, the
     --act-* trio says raise/call/fold. Never chrome. --act-ink is the label on
     an --act-* fill: near-black in both schemes (white fails contrast on the
     light fills). */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/HankenGrotesk-Regular.woff2?v=787b3fdd") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/HankenGrotesk-SemiBold.woff2?v=58f23b7a") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/HankenGrotesk-Bold.woff2?v=d85de6e2") format("woff2"); }

/* ---- Colour -------------------------------------------------------------
   Dark is the default. Light follows the system when the page has no
   data-theme, and the manual toggle sets data-theme="dark" | "light" on <html>.
   Any element can carry data-theme to force a scheme for its subtree (the
   style guide shows every component in both this way). */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f14;
  --panel: #191a22;
  --well: #24252f;
  --border: #2a2b33;
  --text: #ffffff;
  --text-2: #9b9dab;
  --text-3: #8c8fa0;
  --accent: #f5b942;
  --accent-fill: #f5b942;
  --accent-fill-ink: #150f02;
  --accent-edge: #b4841f;
  --celebration: #9b8cff;
  --good: #3fbf7a;
  --mid: #e0a93f;
  --bad: #e0574f;
  --act-raise: #3fbf7a;
  --act-call: #4f93e0;
  --act-fold: #e0574f;
  --act-allin: #a97be8;
  --act-ink: #0e0f14;
  --badge-bronze: #b87333;
  --badge-silver: #b8bcc0;
  --badge-gold: #d4a02c;
  --badge-diamond: #8fd4e0;
  --badge-unearned: #6c6e7c;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f4f7;
    --panel: #ffffff;
    --well: #e6e6ec;
    --border: rgba(0, 0, 0, 0.13);
    --text: #3c3d48;
    --text-2: #565762;
    --text-3: #666772;
    --accent: #946200;
    --accent-fill: #f0a50f;
    --accent-fill-ink: #150f02;
    --accent-edge: #b87808;
    --celebration: #4f3dbb;
    --good: #177644;
    --mid: #9e7112;
    --bad: #b93830;
    --act-raise: #28b064;
    --act-call: #3a89e4;
    --act-fold: #e5514a;
    --act-allin: #9a6ede;
    --act-ink: #150f02;
    --badge-bronze: #a2602a;
    --badge-silver: #6e747b;
    --badge-gold: #a37100;
    --badge-diamond: #1f8ca3;
    --badge-unearned: #8a8c99;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f7;
  --panel: #ffffff;
  --well: #e6e6ec;
  --border: rgba(0, 0, 0, 0.13);
  --text: #3c3d48;
  --text-2: #565762;
  --text-3: #666772;
  --accent: #946200;
  --accent-fill: #f0a50f;
  --accent-fill-ink: #150f02;
  --accent-edge: #b87808;
  --celebration: #4f3dbb;
  --good: #177644;
  --mid: #9e7112;
  --bad: #b93830;
  --act-raise: #28b064;
  --act-call: #3a89e4;
  --act-fold: #e5514a;
  --act-allin: #9a6ede;
  --act-ink: #150f02;
  --badge-bronze: #a2602a;
  --badge-silver: #6e747b;
  --badge-gold: #a37100;
  --badge-diamond: #1f8ca3;
  --badge-unearned: #8a8c99;
}

/* A subtree with its own scheme takes that scheme's ink. `color` inherits as a
   computed value, so without this the app gallery's forced-dark headline kept
   the light page's dark ink (redesign Phase 4). */
[data-theme] { color: var(--text); }

/* ---- Playing cards ---------------------------------------------------------
   A card face is white in both schemes, so the suit colours do not follow the
   theme. The site only ever shows the two-colour deck (black spade and club,
   red heart and diamond); the four-colour deck is an app setting. The suit
   shapes are /assets/suits/*.svg with the same two colours baked in. */

:root {
  --card-face: #ffffff;
  --suit-ink: #15161d;
  --suit-red: #c8443c;
}

/* ---- Type ----------------------------------------------------------------
   Hanken Grotesk, five roles from AppFont.Style. Weight rises with size;
   tracking is in em so it scales. Hanken's digits are tabular by default, which
   suits stacks, percentages and the figures on the site. Its x-height is a
   little lower than most, so body stays at 16px and never drops below it. The
   app's sizes are 62 hero, 23/21 title, 18 section, 16 button, 13.5 body, 12
   meta, 10 label; the web scale keeps their ratios but floors body at 16px and
   the uppercase label at 12px for legibility on a laptop. The sizes are the
   redesign's (SPEC §4.6): a larger display for the first screen, smaller
   section headlines and card titles so the page is shorter, one lede size, and
   a figure size for numbers and prices. Weights are 400, 600 and 700 only. */

:root {
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.25rem, 1.85rem + 2.667vw, 4.25rem);  /* 38 @320, 40 @390, 68 @1440: the h1 only */
  --fs-headline: clamp(1.875rem, 1.456rem + 1.714vw, 3rem);  /* 30 → 48, a section's h2 */
  --fs-title: clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);  /* 20 → 26, a card's h3 */
  --fs-figure: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);       /* 28 → 40, figures and prices */
  --fs-lede: clamp(1.125rem, 1.078rem + 0.19vw, 1.25rem);    /* 18 → 20, every lede */
  --fs-section: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);  /* 18 → 22, FAQ questions */
  --fs-body: 1rem;                                           /* 16 */
  --fs-meta: 0.875rem;                                       /* 14 */
  --fs-label: 0.75rem;                                       /* 12 */

  --fw-display: 600;
  --fw-title: 600;
  --fw-section: 600;
  --fw-body: 400;
  --fw-button: 600;
  --fw-label: 600;

  --track-display: -0.035em;
  --track-headline: -0.03em;
  --track-title: -0.02em;
  --track-body: 0;
  --track-label: 0.14em;

  --lh-display: 1.04;
  --lh-headline: 1.08;
  --lh-title: 1.15;
  --lh-body: 1.55;
}

/* ---- Shape and space ----------------------------------------------------- */

:root {
  --r-panel: 14px;   /* slabs: panels, cards, rows */
  --r-button: 10px;  /* a control */
  --r-card: 6px;     /* small tiles, playing-card scale */
  --r-pill: 999px;
  --stroke: 1px;     /* borders are always one hairline */

  /* 8px grid. --space-half is the one off-grid step, for tight pairs. */
  --space-half: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --section-y: clamp(3rem, 2rem + 3vw, 5rem);  /* 48 @390 → 80; vertical rhythm between sections */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --measure: 40rem;   /* reading width */
  --page-max: 72rem;
  --hit: 2.75rem;     /* 44px minimum hit target */
}

/* ---- Motion --------------------------------------------------------------
   PreflopMotion.Curve. SwiftUI's easeOut is CSS ease-out, cubic-bezier(0, 0,
   0.58, 1). The three springs are sampled into linear() (response/damping as
   in the app) so CSS and script read one set of numbers: site.js parses
   --dur-* and the easings from here into window.PreflopMotion.

   Entrance: 12px rise plus fade, 40ms stagger capped at 160ms of delay, the
   whole thing inside a 400ms budget. Animate transform and opacity only. */

:root {
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  --dur-snappy: 200ms;   /* selection, quick state */
  --dur-settle: 300ms;   /* default state change */
  --dur-entrance: 240ms; /* staggered entrance */
  --dur-reveal: 550ms;   /* soft reveal */
  --dur-count: 900ms;    /* counting numbers */
  --dur-breath: 1500ms;  /* idle swell */

  --press-scale: 0.97;   /* big tactile controls dip on the down-stroke */
  --lip: 4px;            /* a button's 3D edge; a press sinks it to 1px */
  --entrance-rise: 12px;
  --entrance-step: 40ms;
  --entrance-max-delay: 160ms;

  /* spring .22 / .70 */
  --dur-press: 240ms;
  --ease-press: linear(0, 0.0356, 0.1239, 0.2416, 0.3711, 0.5, 0.6197, 0.7254, 0.8146, 0.8868, 0.9428, 0.9841, 1.0129, 1.0313, 1.0416, 1.0457, 1.0454, 1.0421, 1.0372, 1.0313, 1.0254, 1.0196, 1.0145, 1.0101, 1);
  /* spring .34 / .68 */
  --dur-emphasis: 370ms;
  --ease-emphasis: linear(0, 0.0356, 0.1242, 0.2429, 0.374, 0.5049, 0.6268, 0.7345, 0.8254, 0.8987, 0.9553, 0.9966, 1.0249, 1.0425, 1.0516, 1.0543, 1.0525, 1.0478, 1.0414, 1.0343, 1.0271, 1.0205, 1.0146, 1.0097, 1);
  /* spring .33 / .86 */
  --dur-slide: 330ms;
  --ease-slide: linear(0, 0.0295, 0.1015, 0.1968, 0.3016, 0.4067, 0.5062, 0.5968, 0.6766, 0.7453, 0.803, 0.8506, 0.8892, 0.9198, 0.9438, 0.9621, 0.9759, 0.986, 0.9932, 0.9982, 1.0014, 1.0034, 1.0045, 1.005, 1);
}

/* Reduce Motion: content simply appears. Durations go to zero here; site.js
   sets no start state and plays no entrance or count, and no content waits on
   one. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-snappy: 0ms;
    --dur-settle: 0ms;
    --dur-entrance: 0ms;
    --dur-reveal: 0ms;
    --dur-count: 0ms;
    --dur-breath: 0ms;
    --dur-press: 0ms;
    --dur-emphasis: 0ms;
    --dur-slide: 0ms;
    --press-scale: 1;
    --entrance-rise: 0px;
  }
}