/*
 * 小熊油耗 (Xiaoxiong Fuel Consumption) — Design Tokens (CSS Custom Properties)
 * SINGLE SOURCE OF TRUTH for all 5 clients. Spec: ../../DESIGN.md  |  JSON twin: ./tokens.json
 * 📘 = VI manual   🧩 = product   ⚙️ = converged from shipped client values
 * Dual-green: --brand-green = identity; --color-primary = interaction green.
 * Dark theme applies via prefers-color-scheme AND/OR [data-theme="dark"]; VIP via [data-theme="vip"].
 */

:root {
  /* ---- 📘 Brand palette (identity / print / large fills) ---- */
  --brand-green: #00C157;        /* identity · PANTONE 7481C · NOT for white-on text */
  --brand-orange: #FFAA00;
  --brand-bright-green: #00E55C;
  --brand-grass-green: #00A547;
  --brand-teal: #00BF9A;
  --brand-deep-forest: #003F34;
  --brand-sky-cyan: #00CFFF;

  /* ---- 📘 Primary tints (not for text / large cover fills) ---- */
  --brand-green-75: #40D181;
  --brand-green-50: #80E0AB;
  --brand-green-25: #BFF0D5;

  /* ---- ⚙️ Semantic — Light (default), converged from shipped clients ---- */
  --color-bg: #F9F9F9;
  --color-bg-subtle: #F5F6F7;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F0F0F0;
  --color-border: #ECEDED;
  --color-border-strong: #DEDEDE;
  --color-card-stroke: #F2F1F1;
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-on-primary: #FFFFFF;
  --color-text-brand: #07B062;   /* green text/link — interaction green, passes AA */
  --color-primary: #07B062;      /* ⚙️ interaction green (de-facto across 3 native apps) */
  --color-primary-hover: #06A057;
  --color-primary-active: #05833F;
  --color-primary-subtle: #E8F6EE;
  --color-accent: #26D787;       /* bright green accent */
  --color-success: #07B062;
  --color-warning: #FF9859;
  --color-info: #1F91D9;
  --color-danger: #FF3B30;

  /* ---- ⚙️ VIP paid skin (shared gradient across native apps) ---- */
  --vip-bg-gradient: linear-gradient(180deg, #00B32D 0%, #A8FB6D 100%);
  --vip-bg-overlay: rgba(255,255,255,0.7);
  --vip-accent-gold: #FFDC16;

  /* ---- 🧩 Data-viz series (light) ---- */
  --viz-1: #00C157; --viz-2: #00CFFF; --viz-3: #FFAA00;
  --viz-4: #00BF9A; --viz-5: #00A547; --viz-6: #003F34;

  /* ---- Typography ---- ⚙️ digital standard / 📘 print-only fonts in DESIGN.md §5.2 */
  --font-text: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-number: "AlteDIN1451Mittelschriftgepraegt", "PingFang SC", sans-serif;
  --font-brand: "Alimama ShuHeiTi", "PingFang SC", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* font sizes (px) / line-heights — 🧩 */
  --fs-display: 40px;  --lh-display: 48px;
  --fs-h1: 32px;       --lh-h1: 40px;
  --fs-h2: 24px;       --lh-h2: 32px;
  --fs-h3: 20px;       --lh-h3: 28px;
  --fs-body-lg: 18px;  --lh-body-lg: 28px;
  --fs-body: 16px;     --lh-body: 24px;
  --fs-body-sm: 14px;  --lh-body-sm: 20px;
  --fs-caption: 12px;  --lh-caption: 16px;

  /* ---- 🧩 Spacing (4/8) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px;

  /* ---- 🧩 Radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-full: 9999px;

  /* ---- 🧩 Elevation (never on the logo) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.14);

  /* ---- 🧩 Motion ---- */
  --duration-micro: 120ms;
  --duration-standard: 200ms;
  --duration-enter: 300ms;
  --easing-standard: cubic-bezier(.2,.8,.2,1);
}

/* ---- ⚙️ Semantic — Dark (converged from native theme_dark) ---- */
:root[data-theme="dark"] {
  --color-bg: #171B27;
  --color-bg-subtle: #1E2330;
  --color-surface: #282F3F;
  --color-surface-sunken: #171B27;
  --color-border: #3F434B;
  --color-border-strong: #4A4F59;
  --color-card-stroke: #3F434B;
  --color-text: #C1C4C9;
  --color-text-secondary: #999999;
  --color-text-tertiary: #6D737E;
  --color-text-on-primary: #FFFFFF;
  --color-text-brand: #26D787;
  --color-primary: #07B062;
  --color-primary-hover: #26D787;
  --color-primary-active: #00C157;
  --color-primary-subtle: #14241B;
  --color-accent: #26D787;
  --color-success: #07B062;
  --color-warning: #FFB733;
  --color-info: #48A8F0;
  --color-danger: #FF3B30;
  --viz-1: #26D787; --viz-2: #4AD9FF; --viz-3: #FFB733;
  --viz-4: #2FD3B4; --viz-5: #3ADB7A; --viz-6: #7FA89C;
}

/* Auto dark when user has no explicit [data-theme] set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="vip"]) {
    --color-bg: #171B27;
    --color-bg-subtle: #1E2330;
    --color-surface: #282F3F;
    --color-surface-sunken: #171B27;
    --color-border: #3F434B;
    --color-border-strong: #4A4F59;
    --color-card-stroke: #3F434B;
    --color-text: #C1C4C9;
    --color-text-secondary: #999999;
    --color-text-tertiary: #6D737E;
    --color-text-on-primary: #FFFFFF;
    --color-text-brand: #26D787;
    --color-primary: #07B062;
    --color-primary-hover: #26D787;
    --color-primary-active: #00C157;
    --color-primary-subtle: #14241B;
    --color-accent: #26D787;
    --color-success: #07B062;
    --color-warning: #FFB733;
    --color-info: #48A8F0;
    --color-danger: #FF3B30;
    --viz-1: #26D787; --viz-2: #4AD9FF; --viz-3: #FFB733;
    --viz-4: #2FD3B4; --viz-5: #3ADB7A; --viz-6: #7FA89C;
  }
}