/*
 * tokens.css — the ponsfamily palette, lifted from ponsfamily.com's own
 * stylesheet on 2026-08-31 so PONBOND reads as part of the family rather than
 * as an approximation of it.
 *
 * Dark is the default and the one the brand actually lives in. Light exists
 * because ponsfamily ships it, and because a visitor whose OS asks for light
 * should not be handed a near-black page.
 *
 * Rule for every colour below: define it once here as a token, and never let a
 * component invent a raw hex. Slice colours are the single exception and live
 * in config.js, because the allocation chart needs them as data, not as CSS.
 */

:root {
  color-scheme: dark;

  /* Surfaces, darkest to most raised. */
  --bg-page: #0d0d0d;
  --bg-white: #161616;
  --bg-elevated: #1c1c1c;
  --bg-sunken: #0a0a0a;

  /* Type. Muted and subtle carry alpha so they sit on any surface. */
  --text-primary: #f2f2f2;
  --text-muted: #f2f2f294;
  --text-subtle: #f2f2f266;
  --divider: #f2f2f21f;
  --divider-strong: #f2f2f238;

  /* The ponsfamily lime. --accent-contrast is the only text colour that is
   * legible on it, so any lime fill must pair with it. */
  --accent: #d4fc50;
  --accent-hover: #e2ff66;
  --accent-soft: #1c2610;
  --accent-mid: #2a3a14;
  --accent-contrast: #111;

  --success: #30d158;
  --danger: #ff453a;
  --warning: #f0c15c;

  --live-dot: #d4fc50;
  --chart-line: #6f9f18;
  --btn-glow: 0 8px 24px #d4fc5047;
  /* The page bloom, as a token rather than a literal in base.css. A gradient
   * cannot fade a custom property without color-mix(), whose interpolation is
   * still uneven across engines, so the faded value is pre-baked here. It is
   * --accent at 10% alpha and must be updated alongside it. */
  --accent-glow: #d4fc501a;

  /* Glass. The blur is what makes a panel read as ponsfamily rather than flat. */
  --glass-bg: #16161699;
  --glass-border: #f2f2f21f;
  --glass-blur: blur(18px) saturate(1.3);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px #00000040, 0 12px 32px #00000059;
  --shadow-raised: 0 2px 6px #0000004d, 0 20px 48px #00000066;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* One shell width so every surface lines up with the header and footer. */
  --shell-max: 1120px;
  --card-max: 520px;

  --step: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Light. Only the tokens whose ROLE changes are redefined — the lime accent is
 * the same lime, it just gets a pale tint instead of a dark one behind it.
 * Guarded with :not([data-theme='dark']) so an explicit dark choice still wins
 * on a light-preferring OS.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg-page: #f4f4f4;
    --bg-white: #ffffff;
    --bg-elevated: #ffffff;
    --bg-sunken: #eeeeee;

    --text-primary: #111111;
    --text-muted: #1111118c;
    --text-subtle: #11111166;
    --divider: #1111111a;
    --divider-strong: #11111133;

    --accent-hover: #c4ef3c;
    --accent-soft: #f3ffd4;
    --accent-mid: #e5f99a;

    --success: #34c759;
    --danger: #ff3b30;

    --glass-bg: #ffffffcc;
    --glass-border: #1111111a;

    --shadow-card: 0 1px 2px #0000000f, 0 12px 32px #0000001a;
    --shadow-raised: 0 2px 6px #00000014, 0 20px 48px #00000024;
    --btn-glow: 0 8px 24px #d4fc5059;
    /* Slightly stronger on a pale page, where a 10% tint all but vanishes. */
    --accent-glow: #d4fc5033;
  }
}

/* Explicit choices. Both directions, so a toggle wins over the OS either way. */
:root[data-theme='light'] {
  color-scheme: light;
  --bg-page: #f4f4f4;
  --bg-white: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #eeeeee;
  --text-primary: #111111;
  --text-muted: #1111118c;
  --text-subtle: #11111166;
  --divider: #1111111a;
  --divider-strong: #11111133;
  --accent-hover: #c4ef3c;
  --accent-soft: #f3ffd4;
  --accent-mid: #e5f99a;
  --success: #34c759;
  --danger: #ff3b30;
  --glass-bg: #ffffffcc;
  --glass-border: #1111111a;
  --shadow-card: 0 1px 2px #0000000f, 0 12px 32px #0000001a;
  --shadow-raised: 0 2px 6px #00000014, 0 20px 48px #00000024;
  --btn-glow: 0 8px 24px #d4fc5059;
  --accent-glow: #d4fc5033;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg-page: #0d0d0d;
  --bg-white: #161616;
  --bg-elevated: #1c1c1c;
  --bg-sunken: #0a0a0a;
  --text-primary: #f2f2f2;
  --text-muted: #f2f2f294;
  --text-subtle: #f2f2f266;
  --divider: #f2f2f21f;
  --divider-strong: #f2f2f238;
  --accent-hover: #e2ff66;
  --accent-soft: #1c2610;
  --accent-mid: #2a3a14;
  --success: #30d158;
  --danger: #ff453a;
  --glass-bg: #16161699;
  --glass-border: #f2f2f21f;
  --shadow-card: 0 1px 2px #00000040, 0 12px 32px #00000059;
  --shadow-raised: 0 2px 6px #0000004d, 0 20px 48px #00000066;
  --btn-glow: 0 8px 24px #d4fc5047;
  --accent-glow: #d4fc501a;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}