/* Design tokens — Familypal. Light by default, dark via prefers-color-scheme. */
:root {
  color-scheme: light dark;

  /* Brand */
  --pineapple: #FFC233;
  --pineapple-soft: #FFE7A6;
  --pineapple-deep: #E89B00;
  --mangosteen: #6B2F8A;
  --mangosteen-soft: #EFE3F6;
  --mangosteen-deep: #3E1452;
  --sky: #2457C5;
  --sky-soft: #E2EBFF;
  --leaf: #3BAA6E;
  --leaf-soft: #DDF3E6;
  --coral: #FF6B5A;
  --coral-soft: #FFE3DE;
  /* 习惯打卡 (spec §37): mint. --mint-ink is text-safe on --mint-soft. */
  --mint: #12A594;
  --mint-soft: #D4F4EE;
  --mint-ink: #0B6E64;
  --cream: #FFF9EF;
  --ink: #2A1E35;

  /* Lottery balls */
  --ball-red: #E8433F;
  --ball-red-light: #FF8A7A;
  --ball-red-dark: #A8201F;
  --ball-blue: #2D6CF0;
  --ball-blue-light: #7FA8FF;
  --ball-blue-dark: #1442A8;
  /* One size for every bet row (我的彩票 cards, 核对票面, 号码单) */
  --ball-row: clamp(26px, 7.4vw, 30px);
  /* Game chips of the new games (spec §32.7; 双色球 / 大乐透 chips are in app.css) */
  --game-pl5: #0F766E;
  --game-pl5-soft: #D9F2EE;
  --game-pl3: #A1460A;
  --game-pl3-soft: #FDEAD5;
  --game-fc3d: #6D28D9;
  --game-fc3d-soft: #EDE5FF;
  /* 7星彩 (phase 2) pink; 七乐彩 (phase 3a) lime; 快乐8 (phase 3b) sky, so no two games share a chip colour */
  --game-qxc: #BE185D;
  --game-qxc-soft: #FCE4EF;
  --game-qlc: #3F6212;
  --game-qlc-soft: #ECFCCB;
  --game-kl8: #0369A1;
  --game-kl8-soft: #E0F2FE;
  --game-kl8-on: #FFFFFF; /* text on --game-kl8 (选几 selected) */

  /* Surfaces & text */
  --bg: var(--cream);
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF4DF;
  --surface-3: #F6EEE4;
  --surface-sunken: #F4ECE0;
  --text: var(--ink);
  /* text-3 ≥ 4.5:1 on every light surface (was 0.44 ≈ 2.7:1) */
  --text-2: rgba(42, 30, 53, 0.74);
  --text-3: rgba(42, 30, 53, 0.64);
  --text-on-brand: #FFFFFF;
  --line: rgba(42, 30, 53, 0.08);
  --line-strong: rgba(42, 30, 53, 0.16);
  --focus: rgba(107, 47, 138, 0.45);

  /* Hero (page header) */
  --hero-1: #4A1A63;
  --hero-2: #7A3A9C;
  --hero-glow: rgba(255, 194, 51, 0.38);
  --hero-text: #FFFFFF;
  --hero-text-2: rgba(255, 255, 255, 0.76);
  --hero-glass: rgba(255, 255, 255, 0.14);
  --hero-glass-strong: rgba(255, 255, 255, 0.22);
  --hero-line: rgba(255, 255, 255, 0.18);

  /* Semantic */
  --accent: var(--mangosteen);
  --accent-soft: var(--mangosteen-soft);
  /* Text-safe greens/reds (≥ 4.3:1 on their soft fills); --gain / --loss stay bright for big numbers. */
  --positive: #157F47;
  --positive-soft: #DDF3E6;
  /* Small green words on --positive-soft (tags such as 「哥哥已解锁」): ≥ 5:1 there (--positive is 4.3:1). */
  --positive-text: #0F6B3A;
  --danger: #CC3239;
  --danger-soft: #FFE5E3;
  --warning: #C77700;
  --warning-soft: #FFF0CC;
  /* Warning words on a card or a soft fill (e.g. 「要核对」, spec §29.1). */
  --warning-text: #8A5600;

  /* Ledger chart series (validated with the dataviz palette checker against the card surface) */
  --chart-cost: #7B3AA3;
  --chart-prize: #C97300;
  --chart-grid: rgba(42, 30, 53, 0.08);
  --gain: #1E9E5A;
  --loss: #E5484D;

  /* CTA gradient */
  --cta-1: #FFD45C;
  --cta-2: #FFA51F;
  --cta-3: #FF7B4A;
  --cta-text: #3A1F00;

  /* Radii */
  --r-xl: 28px;
  --r-l: 24px;
  --r-m: 20px;
  --r-s: 14px;
  --r-xs: 10px;
  --r-pill: 999px;

  /* Shadows (soft & layered) */
  --shadow-1: 0 1px 2px rgba(62, 20, 82, 0.05), 0 2px 8px rgba(62, 20, 82, 0.05);
  --shadow-2: 0 1px 2px rgba(62, 20, 82, 0.06), 0 6px 16px rgba(62, 20, 82, 0.07), 0 18px 40px rgba(62, 20, 82, 0.06);
  --shadow-3: 0 2px 6px rgba(62, 20, 82, 0.10), 0 16px 40px rgba(62, 20, 82, 0.16), 0 40px 80px rgba(62, 20, 82, 0.10);
  --shadow-cta: 0 2px 4px rgba(200, 90, 0, 0.18), 0 10px 24px rgba(255, 140, 30, 0.35);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;

  /* Layout. --gap: between cards / tiles of one group (grid gaps and stacked-card spacing).
     --card-pad: inner padding of side-by-side cards and tiles. */
  --gutter: 16px;
  --gap: 12px;
  --card-pad: 14px;
  --tabbar-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Gift-book dimensions shared by matching cards and controls. */
  --gift-touch: 44px;
  --gift-figure-h: 128px;
  --gift-row-h: 96px;
  --gift-line: 1.5;
  --gift-type: 16px;
  --gift-type-sm: 13px;
  --gift-number: clamp(14px, 4vw, 19px);
  --gift-icon: 32px;
  --gift-border: 1px;
  --gift-press: 0.97;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
}

@media (min-width: 420px) {
  :root { --gutter: 20px; --gap: 14px; --card-pad: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --pineapple-soft: rgba(255, 194, 51, 0.16);
    --mangosteen-soft: rgba(170, 110, 210, 0.18);
    --leaf-soft: rgba(59, 170, 110, 0.18);
    --sky: #9DBBFF;
    --sky-soft: rgba(45, 108, 240, 0.20);
    --coral-soft: rgba(255, 107, 90, 0.18);
    --mint: #3FD6C3;
    --mint-soft: rgba(63, 214, 195, 0.16);
    --mint-ink: #6BE6D6;
    --game-pl5: #5EEAD4;
    --game-pl5-soft: rgba(20, 184, 166, 0.20);
    --game-pl3: #FCC57A;
    --game-pl3-soft: rgba(245, 158, 11, 0.20);
    --game-fc3d: #C9B8FF;
    --game-fc3d-soft: rgba(139, 92, 246, 0.24);
    --game-qxc: #F9A8D4;
    --game-qxc-soft: rgba(236, 72, 153, 0.22);
    --game-qlc: #BEF264;
    --game-qlc-soft: rgba(132, 204, 22, 0.20);
    --game-kl8: #7DD3FC;
    --game-kl8-soft: rgba(14, 165, 233, 0.20);
    --game-kl8-on: #082F49;

    --bg: #140D1A;
    --bg-elevated: #22172A;
    --surface: #1F1526;
    --surface-2: #2A1E33;
    --surface-3: #33263D;
    --surface-sunken: #180F1E;
    --text: #F7EFFF;
    --text-2: rgba(247, 239, 255, 0.72);
    --text-3: rgba(247, 239, 255, 0.54); /* ≥ 4.8:1 on every dark surface (was 0.46 ≈ 3.9:1 on surface-3) */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --focus: rgba(255, 194, 51, 0.55);

    --hero-1: #240C31;
    --hero-2: #47205C;
    --hero-glow: rgba(255, 194, 51, 0.22);
    --hero-glass: rgba(255, 255, 255, 0.10);
    --hero-glass-strong: rgba(255, 255, 255, 0.16);
    --hero-line: rgba(255, 255, 255, 0.12);

    --chart-cost: #A86ED0;
    --chart-prize: #C4821C;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --gain: #4CD38A;
    --loss: #FF6B6B;

    --accent: #C08BE0;
    --accent-soft: rgba(192, 139, 224, 0.16);
    --positive: #4CD38A;
    --positive-soft: rgba(76, 211, 138, 0.16);
    --positive-text: #4CD38A;
    --danger: #FF6B6B;
    --danger-soft: rgba(255, 107, 107, 0.16);
    --warning: #FFC233;
    --warning-soft: rgba(255, 194, 51, 0.16);
    --warning-text: #FFD06A;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-3: 0 2px 8px rgba(0, 0, 0, 0.40), 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-cta: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(255, 150, 40, 0.25);
  }
}