/* ==========================================================================
   FinLearn 设计令牌 · shadcn/ui 桥接层
   --------------------------------------------------------------------------
   依据：shadcn/ui 官方仓库 apps/v4/app/globals.css 的真实取值（逐字抄录）
     · 主色是「中性近黑」oklch(0 0 0)，不是彩色 —— 这是现代后台高级感的核心
     · 圆角基准 --radius: 0.625rem（10px）
     · 语义角色成对命名：background/foreground、card/card-foreground、
       muted/muted-foreground、primary/primary-foreground、border、input、ring
     · 深色模式不是反色，而是「去饱和 + 提亮」的独立取值

   本层职责：把 shadcn 的语义体系与实测取值落到本站变量上。
   本站保留品牌紫作为唯一的「强调色」（accent），主色改用中性近黑，
   与 shadcn 默认主题一致。

   转换说明：原值为 oklch，这里给出等价的 hex 以便旧浏览器与工具链兼容，
   并在注释里保留原始 oklch 值以便核对。
   ========================================================================== */

:root {
  /* ---------- 圆角基准（shadcn --radius: 0.625rem）---------- */
  --radius: 0.625rem;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;   /* = --radius */
  --radius-xl: 14px;
  --radius-pill: 9999px;

  /* ---------- 中性色阶（对应 shadcn 的 oklch L 值）---------- */
  --neutral-0: #ffffff;      /* oklch(1 0 0) */
  --neutral-50: #f7f7f7;     /* oklch(0.97 0 0) */
  --neutral-100: #f2f2f2;    /* oklch(0.98 0 0) surface */
  --neutral-200: #ebebeb;    /* oklch(0.922 0 0) border / input */
  --neutral-300: #d4d4d4;    /* oklch(0.87 0 0) */
  --neutral-400: #a3a3a3;    /* oklch(0.708 0 0) ring */
  --neutral-500: #5c6672;    /* 原 #8e8e8e 对白底仅 3.27:1，不达 AA，已加深 */
  --neutral-600: #525252;    /* oklch(0.439 0 0) */
  --neutral-700: #3f3f3f;    /* oklch(0.371 0 0) dark accent */
  --neutral-800: #343434;    /* oklch(0.269 0 0) dark muted */
  --neutral-900: #292929;    /* oklch(0.205 0 0) dark card */
  --neutral-950: #0a0a0a;    /* oklch(0 0 0) 主色 / foreground */

  /* ---------- 语义角色（浅色）---------- */
  --background: var(--neutral-0);
  --foreground: var(--neutral-950);
  --card: var(--neutral-0);
  --card-foreground: var(--neutral-950);
  --popover: var(--neutral-0);
  --popover-foreground: var(--neutral-950);
  --primary: var(--neutral-950);           /* 中性近黑，非彩色 */
  --primary-foreground: #fafafa;           /* oklch(0.985 0 0) */
  --secondary: var(--neutral-50);
  --secondary-foreground: var(--neutral-900);
  --muted: var(--neutral-50);
  --muted-foreground: #5c6672;
  --accent-neutral: var(--neutral-50);
  --accent-neutral-foreground: var(--neutral-900);
  --destructive: #dc2626;                  /* oklch(0.577 0.245 27.325) */
  --destructive-foreground: #fef2f2;
  --border: var(--neutral-200);
  --input: var(--neutral-200);
  --ring: var(--neutral-400);
  --surface: var(--neutral-100);
  --sidebar: var(--neutral-50);
  --sidebar-border: var(--neutral-200);

  /* ---------- 品牌强调色（本站保留，shadcn 默认无彩色主色）---------- */
  --brand-accent: #533afd;
  --brand-accent-hover: #4434d4;

  /* ---------- 映射到本站既有语义令牌 ---------- */
  --color-bg: var(--background);
  --color-surface: var(--card);
  --color-surface-alt: var(--muted);
  --color-surface-sunken: var(--surface);
  --color-border: var(--border);
  --color-border-strong: var(--neutral-300);
  --color-text: #1f1f1f;              /* 正文用略浅于 foreground 的近黑，长文更耐读 */
  --color-text-muted: var(--muted-foreground);
  --color-text-subtle: #5c6672;
  --color-heading: var(--foreground);

  --color-primary: var(--primary);
  --color-primary-hover: #000000;
  --color-primary-contrast: var(--primary-foreground);

  /* 强调色仍用品牌紫：主色变中性后，紫是页面上唯一的彩色锚点 */
  --color-accent: var(--brand-accent);
  --color-accent-hover: var(--brand-accent-hover);
  --color-accent-contrast: #ffffff;
  --color-highlight: var(--brand-accent);
  --color-focus: var(--ring);

  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-warning: #a16207;
  --color-warning-bg: #fefce8;
  --color-danger: var(--destructive);
  --color-danger-bg: var(--destructive-foreground);
  --color-info-bg: var(--neutral-50);

  /* 品牌深蓝：仅用于首屏与数据带的大色块，不再是主色 */
  --brand-deep: #0b2a5b;
  --brand-deep-2: #14407c;
  --dark-band: #111111;

  /* ---------- 阴影：shadcn 的做法是极轻 + 用 border/ring 代替重阴影 ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  /* ring 式描边：比 border 更贴内容，是 shadcn 卡片的标志做法 */
  --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- 字号阶梯（沿用 v3，shadcn 用 Tailwind 默认档）---------- */
  --fs-display: 3.5rem;
  --fs-h1: 3rem;
  --fs-h2: 2rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.6875rem;

  /* ---------- 旧变量兜底（业务样式仍在引用）---------- */
  --ink: var(--foreground);
  --ink-2: #1f1f1f;
  --ink-mute: var(--muted-foreground);
  --ink-faint: #5c6672;
  --ink-050: var(--neutral-50);
  --ink-100: var(--neutral-100);
  --ink-200: var(--neutral-200);
  --ink-300: var(--neutral-300);
  --ink-400: var(--neutral-400);
  --ink-500: var(--neutral-500);
  --ink-600: var(--neutral-600);
  --ink-700: var(--neutral-800);
  --ink-800: var(--neutral-900);
  --ink-900: var(--neutral-950);
  --paper-000: var(--neutral-0);
  --paper-050: var(--neutral-50);
  --paper-100: var(--neutral-100);
  --paper-200: var(--neutral-200);
  --paper-300: var(--neutral-300);
  --paper-400: var(--neutral-400);
  --paper-500: var(--neutral-500);
  --paper-700: var(--neutral-600);
  --paper-900: var(--neutral-950);
  --brand: var(--brand-accent);
  --brand-hover: var(--brand-accent-hover);
  --brand-press: #2e2b8c;
  --brand-soft: #c7c0fe;
  --brand-tint: #f4f2ff;
  --hairline: var(--border);
  --hairline-soft: #f2f2f2;
  --bg: var(--background);
  --bg-soft: var(--muted);
  --surface-muted: var(--surface);
  --gold-100: var(--brand-tint);
  --gold-300: var(--brand-soft);
  --gold-400: #8f7ffb;
  --gold-500: var(--brand-accent);
  --gold-600: var(--brand-accent);
  --gold-700: var(--brand-press);
  --gold-800: #241f6e;
}

/* ---------- 深色模式：去饱和 + 提亮，不是反色 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #161616;
    --card-foreground: #fafafa;
    --popover: #161616;
    --popover-foreground: #fafafa;
    --primary: #ebebeb;
    --primary-foreground: #292929;
    --secondary: #242424;
    --secondary-foreground: #fafafa;
    --muted: #242424;
    --muted-foreground: #a3a3a3;
    --accent-neutral: #3f3f3f;
    --accent-neutral-foreground: #fafafa;
    --destructive: #ef4444;
    --destructive-foreground: #fca5a5;
    --border: rgba(255, 255, 255, 0.12);
    --input: rgba(255, 255, 255, 0.16);
    --ring: #8e8e8e;
    --surface: #1a1a1a;
    --sidebar: #161616;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --brand-accent: #8f7ffb;
    --brand-accent-hover: #b3a8ff;
    --brand-deep: #0f1f3a;
    --brand-deep-2: #16325c;
    --dark-band: #0a0a0a;
    --color-text: #d4d4d4;
    --color-text-subtle: #a3a3a3;
    --color-primary-hover: #ffffff;
    --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #161616;
  --card-foreground: #fafafa;
  --popover: #161616;
  --popover-foreground: #fafafa;
  --primary: #ebebeb;
  --primary-foreground: #292929;
  --secondary: #242424;
  --secondary-foreground: #fafafa;
  --muted: #242424;
  --muted-foreground: #a3a3a3;
  --accent-neutral: #3f3f3f;
  --accent-neutral-foreground: #fafafa;
  --destructive: #ef4444;
  --destructive-foreground: #fca5a5;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.16);
  --ring: #8e8e8e;
  --surface: #1a1a1a;
  --sidebar: #161616;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --brand-accent: #8f7ffb;
  --brand-accent-hover: #b3a8ff;
  --brand-deep: #0f1f3a;
  --brand-deep-2: #16325c;
  --dark-band: #0a0a0a;
  --color-text: #d4d4d4;
  --color-text-subtle: #a3a3a3;
  --color-primary-hover: #ffffff;
  --shadow-ring: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   组件微调：把 shadcn 的视觉手法直接落到既有组件上
   ========================================================================== */

/* 卡片：shadcn 用「极轻阴影 + 1px 描边」，不用重投影 */
.card,
.stat,
.tri__col,
.tool,
.viz {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card:hover,
.tri__col:hover,
.tool:hover {
  box-shadow: var(--shadow-md);
}

/* 主按钮：中性近黑实心（shadcn 默认主色），不是彩色 */
.btn--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
}

.btn--primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

/* 强调按钮（品牌紫）：留给页面唯一的主 CTA */
.btn--accent {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
}

.btn--accent:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); }

/* 徽标：shadcn 用 secondary 底 + muted 字，圆角小 */
.badge {
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-weight: var(--fw-medium);
}

.badge--accent { background: var(--brand-tint); color: var(--brand-press); }
.badge--info { background: var(--secondary); color: var(--secondary-foreground); }

/* 输入类控件统一圆角与 ring 焦点 */
.input,
.select,
.textarea {
  border-radius: var(--radius-md);
  border-color: var(--input);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: var(--shadow-focus);
}

/* 表格：shadcn 表头用 muted 底、无竖线 */
.kpi-table thead th {
  background: var(--muted);
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.kpi-table th,
.kpi-table td { border-bottom: 1px solid var(--border); }