/* Aigro v3 runtime tokens. Generated from src/index.css. */
  :root {
    --brand-sand: 38.64407 29.64824% 60.98039%;
    --brand-navy: 212.72727 100.00000% 8.62745%;
    --brand-cream: 30.00000 20.00000% 98.03922%;
    /* Light mode — brand standard v3 (2026-10-22): cream paper, white cards,
       navy ink, warm 1px lines. Blue belongs to Ai only; honey to achievements. */
    --bg: 30.00000 20.00000% 98.03922%;            /* #FBFAF9 cream paper */
    --surface: 0 0% 100%;        /* #FFFFFF cards */
    --card: 40 29% 94%;          /* #F4F1EB warm wells / secondary pills */
    --overlay: 0 0% 100%;        /* #FFFFFF @ 92% (use with /92 alpha) */
    --text-primary: 212.72727 100.00000% 8.62745%; /* #00142C logo navy */
    --text-secondary: 218 17% 27%; /* #3A4352 body */
    --text-muted: 218 12% 40%;   /* #5A6372 meta, AA on cream/white/wells */
    --border: 40.00000 20.68966% 88.62745%;        /* #E8E4DC line */
    --border-strong: 40 18% 80%; /* #D5CFC3 */
    --header: 0 0% 100%;         /* white top bar over cream */

    /* ---- Action system (token names kept for compatibility) ----
       `lime` is the solid action fill: navy pill with white text (v3).
       `lime-text` is the link / active accent: navy, links underlined. */
    --lime: 212.72727 100.00000% 8.62745%;         /* #00142C navy pill fill, white text */
    --lime-hover: 214 70% 18%;   /* #0E2A4F fill hover */
    --lime-text: 212.72727 100.00000% 8.62745%;    /* #00142C navy */
    --lime-soft: 40 29% 94%;     /* #F4F1EB warm tint — chips / hashtags */
    --on-accent: 0 0% 100%;      /* white text on navy fills */

    /* Ai only (v3): Ask Ai, Ai chat, Ai icon. */
    --ai: 216.53631 75.52743% 46.47059%;           /* #1D63D0 accessible Ai text; identity stays --dot-blue */
    --ai-soft: 218 82% 95%;      /* #E8F0FD */
    /* Pastel tints behind Gro/Ai art and icon circles (v3). */
    --tint-honey: 42 100% 93%;   /* #FFF4DA */
    --tint-teal: 162 56% 93%;    /* #E3F7F1 */
    --tint-sand: 39 46% 93%;     /* #F5EFE4 */
    --honey-ink: 40.81633 100.00000% 28.82353%;    /* #936400 accessible honey text */

    /* ---- Logo-source palette (three-dot identity reference only) ----
       These values reproduce the supplied AIGRO mark and its documentation.
       They are restricted to logo artwork, colour-reference swatches, and
       explanatory diagrams. Product actions use navy/cream tokens; these source colours do not
       create additional interface accents. */
    --logo-navy: 222 60% 11%;    /* #0B132B */
    --logo-paper: 220 14% 97%;   /* #F6F7F9 */
    --logo-green: 160 84% 39%;   /* #10B981 */
    --logo-blue: 219 83% 56%;    /* #2F6FEB */
    --logo-gray: 220 9% 46%;     /* #6B7280 */

    /* Flat decorative dots (Family-style circles on banners, stickers, mascots).
       Decoration only; never text or action colours. */
    --dot-blue: 216.73469 81.66667% 52.94118%;     /* #2571E9 logo blue */
    --dot-teal: 165.35714 75.67568% 43.52941%;     /* #1BC39A logo teal */
    --dot-honey: 41.19816 100.00000% 57.45098%;    /* #FFBB26 */
    --dot-coral: var(--dot-honey); /* coral retired in v3; alias only */
    --dot-ember: 15 100% 50%;    /* #FF3E00 */

    /* Welcome banner: soft sky panel with navy type; mascots and dots sit on it. */
    --banner: 162 56% 93%;       /* #E3F7F1 teal tint (Gro) */
    --banner-fg: 213 100% 9%;    /* #00142C */
    --banner-muted: 215 25% 32%; /* #3D4A63 */

    /* Google Identity button, exact light-theme branding tokens. */
    --google-button-bg: 0 0% 100%;
    --google-button-hover: 220 14% 96%;
    --google-button-border: 180 1% 46%;
    --google-button-text: 0 0% 12%;

    /* Legacy aliases — cascade the rebrand to every page without page edits.
       `ink` reads navy/cream actions; `gold` remains a compatibility alias. */
    --ink: var(--lime-text);        /* text/link accent on light */
    --ink-hover: var(--lime-hover); /* hover of solid lime fills */
    --ink-solid: var(--lime);       /* solid primary action */
    --ink-soft: var(--lime-soft);   /* tinted chip / AI bubble bg */
    --gold: var(--lime-text);       /* compatibility emphasis → navy */
    --gold-soft: var(--lime-soft);  /* premium wells → warm tint */

    /* Stripe motif color (hard-stop pattern, theme-aware) */
    --stripe-color: hsl(213 100% 9% / 0.06); /* navy @ 6% on paper */

    --success: 164.85437 75.18248% 26.86275%;      /* #11785E accessible teal text, including card wells */
    --warning: 37 83% 35%;       /* #A36A0F */
    --error: 5 55% 42%;          /* #A63A30 */

    /* Brand v3: one Noto Sans HK family for Chinese, Latin and numbers.
       PingFang HK is the system fallback; regular body, semibold headings. */
    --font-cjk: "Noto Sans HK", "PingFang HK", "PingFang TC", "Microsoft JhengHei";
    --font-display: var(--font-cjk), system-ui, sans-serif;
    --font-sans: var(--font-display);
    --font-mono: var(--font-cjk), ui-monospace, monospace;

    --radius: 20px;

    /* Motion tokens (Emil-grade; theme-independent — hover/micro MUST use strong ease-out) */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);

    /* ---- shadcn token remap (design.md §7: primary→ink, destructive→error) ---- */
    --background: var(--bg);
    --foreground: var(--text-primary);
    --card-foreground: var(--text-primary);
    --popover: var(--surface);
    --popover-foreground: var(--text-primary);
    --primary: var(--ink);
    --primary-foreground: var(--on-accent); /* theme-specific action foreground */
    --secondary: var(--card);
    --secondary-foreground: var(--text-primary);
    --muted: var(--card);
    --muted-foreground: var(--text-muted);
    --accent: var(--ink-soft);
    --accent-foreground: var(--ink);
    --destructive: var(--error);
    --destructive-foreground: 0 0% 100%;
    --input: var(--border-strong);
    --ring: var(--ink);
    --sidebar-background: var(--surface);
    --sidebar-foreground: var(--text-primary);
    --sidebar-primary: var(--ink);
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: var(--ink-soft);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ink);

    /* Verified badge sheen opacity (design.md §5.3: 22% light / 14% dark) */
    --sheen-opacity: 0.22;

    /* ---- Editorial bands ----
       Light mode stays on the same cream-paper family as the application
       shell. Dark mode receives its own tuned navy values below. */
    --band-bg: var(--bg);
    --band-surface: var(--surface);
    --band-card: var(--card);
    --band-text: var(--text-primary);
    --band-text-secondary: var(--text-secondary);
    --band-text-muted: var(--text-muted);
    --band-border: var(--border);
    --band-border-strong: var(--border-strong);
    --band-ink: var(--lime-text);
    --band-ink-solid: var(--lime);    /* same action treatment as the page */
    --band-ink-hover: var(--lime-hover); /* navy hover on band */
    --band-ink-soft: var(--lime-soft);
    /* Official ekcheungAI partner wordmark; not an AIGRO interface accent. */
    --partner-ek: 217 100% 51%;
    --band-gold: var(--lime);         /* legacy emphasis alias */
    --band-warning: 38 67% 54%;       /* #D9A03C — amber LIVE dot (semantic status, not accent) */
    --text-page-title: 28px;
    --text-section: 18px;
    --text-display: 40px;
    --chip-live: var(--success);
    --chip-live-bg: var(--tint-teal);
    --chip-draft: var(--honey-ink);
    --chip-draft-bg: var(--tint-honey);
    --chip-beta: var(--text-primary);
    --chip-beta-bg: var(--tint-honey);
    --chip-pending: var(--text-muted);
    --chip-pending-bg: var(--card);
    --chip-error: var(--error);
    --chip-error-bg: var(--surface);
  }

  .dark {
    /* Dark mode — deep navy canvas (#02122C family, cool-neutral) */
    --bg: 217 91% 9%;            /* #02122C */
    --surface: 216 71% 14%;      /* #0A1E3C */
    --card: 216 67% 17%;         /* #0E2547 */
    --overlay: 216 71% 14%;      /* #0A1E3C @ 92% */
    --text-primary: 210 40% 94%; /* #EAF0F6 */
    --text-secondary: 210 20% 77%;/* #B8C4D0 */
    --text-muted: 214 15% 58%;   /* #8593A5 */
    --border: 216 50% 22%;       /* #1C3355 */
    --border-strong: 215 45% 31%;/* #2C4A73 */
    --header: 216 71% 12%;       /* #0A1B35 top bar */

    /* Google Identity button, exact dark-theme branding tokens. */
    --google-button-bg: 240 3% 8%;
    --google-button-hover: 240 2% 12%;
    --google-button-border: 140 1% 56%;
    --google-button-text: 0 0% 89%;

    /* Accessible cream actions on the navy canvas; legacy aliases follow. */
    --lime: 30 20% 96%;          /* cream pill fill on the navy canvas (v3) */
    --lime-hover: 40 21% 86%;    /* warm line hover */
    --on-accent: 213 100% 9%;    /* navy text on cream fills */
    --lime-text: 30 20% 96%;     /* text/link accent = cream, links underlined */
    --lime-soft: 216 67% 17%;    /* #0E2547 well — chips */
    --ai: 217 88% 66%;           /* #5B95F5 Ai blue, lifted for navy */
    --ai-soft: 217 55% 18%;      /* #142D47 */
    --tint-honey: 41 35% 17%;
    --tint-teal: 165 40% 15%;
    --tint-sand: 36 18% 18%;
    --honey-ink: 41 100% 62%;
    --gold: var(--lime);         /* compatibility emphasis alias */
    --gold-soft: var(--lime-soft);

    --stripe-color: hsl(30 20% 96% / 0.08); /* cream @ 8% on navy */

    --success: 165 76% 44%;      /* #1BC39A logo teal */
    --warning: 38 67% 54%;       /* #D9A03C */
    --error: 6 59% 63%;          /* #D9756A */

    --sheen-opacity: 0.14;

    /* Dark-mode editorial bands retain the cinematic deep-navy treatment. */
    --band-bg: 217 91% 9%;
    --band-surface: 216 71% 14%;
    --band-card: 216 67% 17%;
    --band-text: 210 40% 94%;
    --band-text-secondary: 210 20% 77%;
    --band-text-muted: 214 15% 58%;
    --band-border: 216 50% 22%;
    --band-border-strong: 215 45% 31%;
    --band-ink: var(--lime);
    --band-ink-solid: var(--lime);
    --band-ink-hover: var(--lime-hover);
    --band-ink-soft: 217 55% 18%;
    --banner: 216 67% 17%;       /* #0E2547 lifted off the navy canvas */
    --banner-fg: 0 0% 100%;
    --banner-muted: 215 35% 80%; /* #C2CEDF */
    --partner-ek: 217 100% 71%;
    --band-gold: var(--lime);
    --band-warning: 38 67% 54%;

  }