/* US Market design tokens, design system v2 「掌上 × 研報」 (DESIGN.md, 2026-11-07). Load before usmarket.css.
   Token names are unchanged from v1 so every existing var(--ds-*) picks up the new values; v2-only tokens follow. */
:root {
    /* One accent hue (violet). primary = main buttons and selected options; interactive = links and focus;
       accent = model-estimate badge and featured plan. Gold is gone. */
    --ds-primary: #5B3DF5;
    --ds-primary-hover: #4A2EE0;
    --ds-on-primary: #FFFFFF;
    --ds-interactive: #4F31E8;
    --ds-on-interactive: #FFFFFF;
    --ds-interactive-soft: #ECE8FE;
    --ds-accent: #5B3DF5;
    --ds-on-accent: #FFFFFF;
    --ds-accent-soft: #ECE8FE;
    --ds-on-accent-soft: #4F31E8;
    --ds-brand-red: #DD3D4D;
    /* Neutrals lean toward the violet accent. */
    --ds-background: #F1F0F6;
    --ds-surface: #FFFFFF;
    --ds-surface-2: #F4F2FA;
    --ds-border: #E4E1EE;
    --ds-border-strong: #CFC9E0;
    --ds-on-surface: #17141F;
    --ds-muted: #6A6579;
    --ds-error: #B5222C;
    /* Semantic: risk always carries a text label; price moves are red up / green down (Taiwan). */
    --ds-risk-low: #0C7166;
    --ds-risk-low-soft: #E3F4F1;
    --ds-risk-medium: #955700;
    --ds-risk-medium-soft: #FCF0DC;
    --ds-risk-high: #B5222C;
    --ds-risk-high-soft: #FCE9EB;
    --ds-market-up: #C42836;
    --ds-market-down: #07743F;
    --ds-shadow-color: 23, 20, 31;
    --ds-shadow-overlay: 0 18px 40px rgba(23, 20, 31, 0.16);
    --ds-focus-ring: 0 0 0 3px rgba(91, 61, 245, 0.28);

    /* v2: app cards float on a soft shadow; editorial (news and articles) sits on paper with rules. */
    --ds-shadow-card: 0 1px 2px rgba(23, 20, 31, 0.05), 0 10px 28px rgba(23, 20, 31, 0.07);
    --ds-paper: #FFFFFF;
    --ds-rule: #17141F;
    --ds-marker: #FFE45C;
    --ds-on-marker: #17141F;

    --ds-font-sans: "Plus Jakarta Sans", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --ds-font-num: "Plus Jakarta Sans", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-serif: "Source Serif 4", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
    --ds-radius-md: 14px;
    --ds-radius-card: 22px;
    --ds-radius-card-sm: 18px;
    --ds-radius-img: 12px;
    --ds-radius-full: 9999px;
    --ds-space-xs: 4px;
    --ds-space-sm: 8px;
    --ds-space-md: 12px;
    --ds-space-lg: 16px;
    --ds-space-xl: 24px;
    --ds-space-2xl: 32px;
    --ds-space-3xl: 48px;
    --ds-control-height: 44px;
    --ds-touch-target: 44px;
    --ds-row: 54px;
    --ds-row-compact: 40px;
    --ds-font-min: 12px;
    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ds-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ds-dur-spring: 340ms;
    --ds-dur-fast: 160ms;
}

html[data-theme="dark"] {
    --ds-primary: #9A88FF;
    --ds-primary-hover: #B3A6FF;
    --ds-on-primary: #0E0B1C;
    --ds-interactive: #B3A6FF;
    --ds-on-interactive: #0E0B1C;
    --ds-interactive-soft: #2A2350;
    --ds-accent: #9A88FF;
    --ds-on-accent: #0E0B1C;
    --ds-accent-soft: #2A2350;
    --ds-on-accent-soft: #C9C0FF;
    --ds-background: #0E0C15;
    --ds-surface: #1A1724;
    --ds-surface-2: #231F31;
    --ds-border: #2D283C;
    --ds-border-strong: #3E3753;
    --ds-on-surface: #F2F0F8;
    --ds-muted: #A39EB4;
    --ds-error: #FF7A7A;
    --ds-risk-low: #4CC9B8;
    --ds-risk-low-soft: #13302C;
    --ds-risk-medium: #F2B657;
    --ds-risk-medium-soft: #33280F;
    --ds-risk-high: #FF7A7A;
    --ds-risk-high-soft: #3A1C22;
    --ds-market-up: #FF6B74;
    --ds-market-down: #3CD48C;
    --ds-shadow-color: 0, 0, 0;
    --ds-shadow-overlay: 0 18px 40px rgba(0, 0, 0, 0.5);
    --ds-focus-ring: 0 0 0 3px rgba(154, 136, 255, 0.4);
    --ds-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px rgba(0, 0, 0, 0.35);
    --ds-paper: #15121D;
    --ds-rule: #F2F0F8;
    --ds-marker: #4A3F0C;
    --ds-on-marker: #FFE45C;
}