/* 知盘 TapeDepth · Brand Visual Identity v1.0 */
:root, html[data-theme="dark"] {
  --orange-bright: #FF8A3D;
  --orange-deep: #EA580C;
  --orange-soft: #FDBA74;

  --ink: #0B0F14;
  --surface: #12161D;
  --elevated: #1E2530;
  --border: #334155;
  --muted: #64748B;
  --secondary: #94A3B8;
  --text: #F8FAFC;
  --text-dark: #0F172A;

  --up: #2DD4BF;
  --down: #FB7185;
  --info: #38BDF8;
  --warn: #FBBF24;

  --accent: var(--orange-bright);
  --accent-hover: var(--orange-soft);
  --accent-dim: rgba(255, 138, 61, 0.14);
  --accent-border: rgba(255, 138, 61, 0.4);
  --on-accent: var(--ink);

  --surface-alt: var(--elevated);
  --hairline: var(--border);
  --foam: var(--text);
  --text-faint: var(--muted);
  --disabled: var(--muted);
  --logo-mid: var(--secondary);
  --mark-bg: var(--elevated);
  --mark-t: var(--text);
  --page-bg: var(--ink);
  --app-shadow: none;
  --radius: 12px;
  --radius-sm: 8px;

  --bg: var(--ink);
  --panel: var(--surface);
  --panel-2: var(--elevated);
  --line: var(--border);
  --line-soft: var(--border);
  --mint: var(--accent);
  --mint-hover: var(--accent-hover);
  --mint-dim: var(--accent-dim);
  --muted-2: var(--muted);
}

html[data-theme="light"] {
  --ink: #F1F5F9;
  --surface: #FFFFFF;
  --elevated: #F8FAFC;
  --border: #CBD5E1;
  --muted: #64748B;
  --secondary: #475569;
  --text: #0F172A;

  --accent: var(--orange-deep);
  --accent-hover: #F97316;
  --accent-dim: rgba(234, 88, 12, 0.12);
  --accent-border: rgba(234, 88, 12, 0.38);
  --on-accent: #FFFFFF;

  --surface-alt: var(--elevated);
  --hairline: var(--border);
  --foam: var(--text);
  --text-faint: var(--muted);
  --disabled: #94A3B8;
  --logo-mid: #94A3B8;
  --mark-bg: #FFFFFF;
  --mark-t: var(--text-dark);
  --page-bg:
    radial-gradient(900px 420px at 10% -10%, rgba(255, 138, 61, 0.09), transparent 55%),
    linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  --app-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);

  --bg: var(--ink);
  --panel: var(--surface);
  --panel-2: var(--elevated);
  --line: var(--border);
  --mint: var(--accent);
  --mint-hover: var(--accent-hover);
  --mint-dim: var(--accent-dim);
}