/* ═══════════════════════════════════════════════════════════════════
   FinSight — Design Tokens · Single Source of Truth
   Loaded BEFORE all other stylesheets so its :root defaults win.
   style.css / detail-pro.css / index-pro.css / luxe-pro.css / mobile-pro.css
   should NOT redefine anything in here.

   Tone target: Quiet Luxury × Quant Terminal
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1 · BRAND — single accent (Terminal Cyan)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --accent:         #4DD3E5;
  --accent-rgb:     77, 211, 229;
  --accent-dark:    #00B4CC;
  --accent-soft:    rgba(77, 211, 229, 0.18);
  --accent-whisper: rgba(77, 211, 229, 0.06);
  /* On-accent text — always-dark color for text/icons placed ON --accent
     surfaces (cyan is bright enough that dark text reads in both modes;
     using --bg-base would invert in light mode and tank contrast). */
  --on-accent:      #07090F;
  --accent-glow:
    0 0 24px rgba(77, 211, 229, 0.18),
    0 0 64px rgba(77, 211, 229, 0.08);

  /* 2 · SURFACE — deep terminal-grade dark, 5 layers */
  --bg-base:     #07090F;
  --bg-surface:  #0E121C;
  --bg-elevated: #131826;
  --bg-overlay:  #1A2032;

  /* Hairlines */
  --line:        rgba(148, 163, 184, 0.10);
  --line-strong: rgba(148, 163, 184, 0.18);
  --line-faint:  rgba(148, 163, 184, 0.06);

  /* Text — bumped for WCAG AA on --bg-base */
  --text-primary:   #E6EBF2;
  --text-secondary: #B6C2D4;
  --text-muted:     #94A3B8;
  --text-faint:     #5B677A;

  /* 3 · SEMANTIC (financial) — fixed regardless of theme */
  --gain:        #34D17C;
  --gain-rgb:    52, 209, 124;
  --gain-dim:    rgba(52, 209, 124, 0.12);
  --loss:        #F25C5C;
  --loss-rgb:    242, 92, 92;
  --loss-dim:    rgba(242, 92, 92, 0.12);
  --warning:     #F5B549;
  --warning-dim: rgba(245, 181, 73, 0.12);
  --info:        #5B86F5;
  --info-dim:    rgba(91, 134, 245, 0.12);
  --neutral:     #F5B549;
  --neutral-dim: rgba(245, 181, 73, 0.12);

  /* Legacy aliases — point at semantic colors so old rules continue to work */
  --success:     var(--gain);
  --success-dim: var(--gain-dim);
  --danger:      var(--loss);
  --danger-dim:  var(--loss-dim);

  /* Heatmap (YoY cell tint) */
  --heat-strong-up: rgba(52, 209, 124, 0.28);
  --heat-mid-up:    rgba(52, 209, 124, 0.16);
  --heat-soft-up:   rgba(52, 209, 124, 0.08);
  --heat-strong-dn: rgba(242, 92, 92, 0.28);
  --heat-mid-dn:    rgba(242, 92, 92, 0.16);
  --heat-soft-dn:   rgba(242, 92, 92, 0.08);

  /* Letter grades */
  --grade-aplus: #34D17C;
  --grade-a:     #4DD3E5;
  --grade-b:     #5B86F5;
  --grade-c:     #F5B549;
  --grade-d:     #F25C5C;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     4 · MOTION — every animation must reference these
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    150ms;  /* hover · focus */
  --dur-normal:  240ms;  /* state change */
  --dur-slow:    420ms;  /* tab · drawer */
  --dur-narr:    900ms;  /* path · stagger */

  /* 5 · SPACING — 8-pt grid (no 10/14/20/30/40 mid-values) */
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* 6 · RADIUS — 4 levels only */
  --radius-xs: 4px;   /* chips · 小标签 */
  --radius-sm: 8px;   /* 按钮 · 输入框 */
  --radius-md: 14px;  /* 卡片 */
  --radius-lg: 20px;  /* hero 容器 */
  /* Legacy aliases — kept so non-migrated rules continue to work */
  --radius:    var(--radius-sm);
  --radius-xl: var(--radius-lg);

  /* 7 · LAYOUT chrome */
  --sidebar-w:     240px;
  --sidebar-w-col: 64px;
  --titlebar-h:    48px;

  /* Container widths — F-pattern hierarchy (PDF §10) */
  --container-narrow:  680px;   /* AI Memo 阅读 */
  --container-default: 1280px;  /* 大多数页 */
  --container-wide:    1600px;  /* 财务三表 */
  --container-full:    100%;    /* 同业雷达 · 大屏 */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     8 · GLASS — used by .glass-card across pages
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-md:     rgba(255, 255, 255, 0.065);
  --glass-bg-hover:  rgba(255, 255, 255, 0.09);
  --glass-border:    rgba(148, 163, 184, 0.10);
  --glass-border-md: rgba(148, 163, 184, 0.18);
  --card-border:     1px solid rgba(148, 163, 184, 0.18);

  /* Luxe glass — body.luxe surfaces */
  --luxe-glass-bg:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.012) 50%,
      rgba(255, 255, 255, 0.025) 100%);
  --luxe-glass-blur:     20px;
  --luxe-glass-saturate: 140%;
  --luxe-glass-border:   rgba(255, 255, 255, 0.06);
  --luxe-glass-edge:     rgba(255, 255, 255, 0.10);

  /* 9 · SHADOWS — layered system */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.15),
    0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.20),
    0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.25),
    0 8px 10px -6px rgba(0, 0, 0, 0.15);

  --luxe-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 12px 24px -8px rgba(0, 0, 0, 0.40),
    0 32px 64px -16px rgba(0, 0, 0, 0.50);
  --luxe-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(77, 211, 229, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 16px 32px -8px rgba(0, 0, 0, 0.50),
    0 40px 80px -20px rgba(0, 0, 0, 0.55);
  --luxe-shadow-flat:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.20);

  --luxe-glow-soft:
    0 0 24px rgba(77, 211, 229, 0.14);
  --luxe-glow-medium:
    0 0 32px rgba(77, 211, 229, 0.28),
    0 0 64px rgba(77, 211, 229, 0.12);
  --luxe-glow-strong:
    0 0 48px rgba(77, 211, 229, 0.40),
    0 0 96px rgba(77, 211, 229, 0.18);

  /* 10 · LEGACY ALIASES — used by inline HTML / older CSS.
     Point them at the new semantic palette so we can delete them later. */
  --primary:       var(--accent);
  --primary-light: rgba(77, 211, 229, 0.10);
  --primary-dim:   rgba(77, 211, 229, 0.12);
  --primary-glow:  rgba(77, 211, 229, 0.30);
  --gray-50:  #1E293B;
  --gray-100: #263348;
  --gray-200: rgba(255, 255, 255, 0.08);
  --gray-300: rgba(255, 255, 255, 0.12);
  --gray-400: #64748B;
  --gray-500: #94A3B8;
  --gray-600: #94A3B8;
  --gray-700: #CBD5E1;
  --gray-800: #E2E8F0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRESS — quiet gray alternate (Settings opt-in)
   This is the ONLY non-default theme that survives the cleanup.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root[data-theme="press"] {
  --accent:         #94A3B8;
  --accent-rgb:     148, 163, 184;
  --accent-dark:    #64748B;
  --accent-soft:    rgba(148, 163, 184, 0.18);
  --accent-whisper: rgba(148, 163, 184, 0.06);
  /* Press gray is mid-luminance — dark text still wins (slate vs near-black). */
  --on-accent:      #07090F;
  --accent-glow:
    0 0 24px rgba(148, 163, 184, 0.14),
    0 0 64px rgba(148, 163, 184, 0.06);

  --grade-a:        #94A3B8;
  --primary-light:  rgba(148, 163, 184, 0.10);
  --primary-dim:    rgba(148, 163, 184, 0.12);
  --primary-glow:   rgba(148, 163, 184, 0.30);

  --luxe-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(148, 163, 184, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 16px 32px -8px rgba(0, 0, 0, 0.50),
    0 40px 80px -20px rgba(0, 0, 0, 0.55);
  --luxe-glow-soft:
    0 0 24px rgba(148, 163, 184, 0.14);
  --luxe-glow-medium:
    0 0 32px rgba(148, 163, 184, 0.28),
    0 0 64px rgba(148, 163, 184, 0.12);
  --luxe-glow-strong:
    0 0 48px rgba(148, 163, 184, 0.40),
    0 0 96px rgba(148, 163, 184, 0.18);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE — surface flip; accent stays cyan
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html.light {
  --bg-base:     #FAFBFC;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #F4F6FA;
  --bg-overlay:  #ECEFF4;

  --line:        rgba(15, 23, 42, 0.10);
  --line-strong: rgba(15, 23, 42, 0.18);
  --line-faint:  rgba(15, 23, 42, 0.05);

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --text-faint:     #94A3B8;

  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-bg-md:     rgba(255, 255, 255, 0.88);
  --glass-bg-hover:  rgba(255, 255, 255, 0.95);
  --glass-border:    rgba(15, 23, 42, 0.10);
  --glass-border-md: rgba(15, 23, 42, 0.16);
  --card-border:     1px solid rgba(15, 23, 42, 0.16);

  --luxe-glass-bg:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.78) 50%,
      rgba(255, 255, 255, 0.86) 100%);
  --luxe-glass-blur:     28px;
  --luxe-glass-saturate: 180%;
  --luxe-glass-border:   rgba(15, 23, 42, 0.08);
  --luxe-glass-edge:     rgba(255, 255, 255, 0.95);

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -4px rgba(0, 0, 0, 0.04);

  --luxe-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -8px rgba(15, 23, 42, 0.10),
    0 24px 48px -16px rgba(15, 23, 42, 0.10);
  --luxe-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 0 0 1px rgba(77, 211, 229, 0.28),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 16px 32px -8px rgba(15, 23, 42, 0.14),
    0 32px 64px -20px rgba(15, 23, 42, 0.16);

  --gray-50:  #F1F5F9;
  --gray-100: #E2E8F0;
  --gray-200: rgba(0, 0, 0, 0.08);
  --gray-300: rgba(0, 0, 0, 0.12);
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
}

html.light[data-theme="press"] {
  --luxe-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 0 0 1px rgba(148, 163, 184, 0.28),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 16px 32px -8px rgba(15, 23, 42, 0.14),
    0 32px 64px -20px rgba(15, 23, 42, 0.16);
}