/* PeakMind ERP — Premium Design Tokens (Light/Dark Support) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;600;700;800&display=swap");

:root {
  --hover-bg: rgba(255, 255, 255, 0.04);
  --group-bg: rgba(255, 255, 255, 0.02);
  /* === Shared / Core Variables === */
  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s;
  --t-base: 0.3s;
  --t-slow: 0.5s;

  --font-headline: "Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Noto Sans TC", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Z-index scale (語意化分層) ===
     base: 0 / decorative: -1 / sticky-header: 10-20 / sticky-table: 30
     bulk-bar: 90 / drawer-backdrop: 60 / drawer: 70 / modal-backdrop: 80
     modal: 100 / toast: 110 / sidebar-reveal: 200 / popover: 1000 */
  --z-below: -1;
  --z-sticky: 20;
  --z-sticky-table: 30;
  --z-drawer-backdrop: 60;
  --z-drawer: 70;
  --z-modal-backdrop: 80;
  --z-bulk-bar: 90;
  --z-modal: 100;
  --z-toast: 110;
  --z-sidebar-reveal: 200;
  --z-popover: 1000;

  --text-h1: clamp(40px, 4.5vw, 64px);
  --text-h2: clamp(24px, 2.5vw, 32px);
  --text-h3: 18px;
  --text-body: 14px;
  --text-caption: 12px;
  --text-micro: 11px;

  /* === Light Mode (Default / Base) === */
  --primary: #0a1828;
  --primary-deep: #050e1a;
  --primary-container: #122940;
  --on-primary: #ffffff;

  --accent: #b8935c;
  --accent-dim: #9a7943;
  --accent-dark: #7a5f35;
  --accent-light: #d4b07b;
  --accent-fade: rgba(184, 147, 92, 0.12);
  --accent-grad: linear-gradient(90deg, #9a7943 0%, #c48a42 50%, #9a7943 100%);
  /* Hero number 專用漸層（比 accent-grad 更有層次、對比更強） */
  --hero-grad: linear-gradient(135deg, #0a1828 0%, #1e3a5f 38%, #8a6535 72%, #b8935c 100%);
  --hero-shadow: 0 2px 20px rgba(10, 24, 40, 0.18);
  --btn-accent-bg: var(--primary);
  --btn-accent-text: #ffffff;

  /* Sidebar accent tones */
  --accent-border-subtle: rgba(184, 147, 92, 0.10);
  --accent-hover-bg:      rgba(184, 147, 92, 0.08);
  --accent-selected:      rgba(184, 147, 92, 0.15);
  --accent-selected-hover: rgba(184, 147, 92, 0.25);

  /* Inverse surface — text/borders on the always-dark sidebar */
  --glass-border-dark:        var(--outline-variant);
  --inverse-on-surface-muted: var(--on-surface-muted);

  --surface: #f6f7f9;
  --surface-container: #ffffff;
  --surface-container-low: #f0f2f5;
  --surface-container-lowest: rgba(255, 255, 255, 0.9);
  
  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --on-surface-muted: #64748b;

  --outline: #cbd5e1;
  --outline-variant: #e2e8f0;
  --outline-subtle: rgba(0, 0, 0, 0.04);

  --income: #15803d;
  --income-bg: rgba(21, 128, 61, 0.1);
  --income-bar: rgba(21, 128, 61, 0.55);
  --expense: #b91c1c;
  --expense-bg: rgba(185, 28, 28, 0.1);
  --expense-bar: rgba(185, 28, 28, 0.55);
  --transfer: #64748b;
  --transfer-bg: rgba(100, 116, 139, 0.1);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --glow-accent: 0 0 16px rgba(184, 147, 92, 0.2);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.05);
  
  --mesh-color: rgba(0, 0, 0, 0.03);
}

/* === Dark Mode === */
html[data-theme="dark"] {
  --primary: #060f1a;
  --primary-deep: #03080e;
  --primary-container: #0e1a2a;
  --on-primary: #ffffff;

  --accent: #e9c176;
  --accent-dim: #c8900a;
  --accent-dark: #a67300;
  --accent-light: #fff5b0;
  --accent-fade: rgba(233, 193, 118, 0.15);
  --accent-grad: linear-gradient(90deg, #c8900a 0%, #e8c050 30%, #fff5b0 55%, #e0b030 80%, #c09020 100%);
  /* Dark mode hero 保留原本金屬光澤感 */
  --hero-grad: linear-gradient(90deg, #c8900a 0%, #e8c050 30%, #fff5b0 55%, #e0b030 80%, #c09020 100%);
  --hero-shadow: 0 2px 20px rgba(233, 193, 118, 0.25);
  --btn-accent-bg: var(--accent);
  --btn-accent-text: var(--primary-deep);

  --accent-border-subtle:  rgba(233, 193, 118, 0.10);
  --accent-hover-bg:       rgba(233, 193, 118, 0.08);
  --accent-selected:       rgba(233, 193, 118, 0.15);
  --accent-selected-hover: rgba(233, 193, 118, 0.25);

  --glass-border-dark:        rgba(255, 255, 255, 0.08);
  --inverse-on-surface-muted: rgba(255, 255, 255, 0.45);

  --surface: #0a1520;
  --surface-container: #121f2d;
  --surface-container-low: #0f1a26;
  --surface-container-lowest: rgba(255, 255, 255, 0.02);
  
  /* Softened text for big screens */
  --on-surface: rgba(255, 255, 255, 0.92);
  --on-surface-variant: rgba(255, 255, 255, 0.68);
  --on-surface-muted: rgba(255, 255, 255, 0.50);

  --outline: #1e293b;
  --outline-variant: #334155;
  --outline-subtle: rgba(255, 255, 255, 0.04);

  --income: #6ee7a0;
  --income-bg: rgba(110, 231, 160, 0.12);
  --income-bar: rgba(110, 231, 160, 0.55);
  --expense: #fc8181;
  --expense-bg: rgba(252, 129, 129, 0.12);
  --expense-bar: rgba(252, 129, 129, 0.55);
  --transfer: #94a3b8;
  --transfer-bg: rgba(148, 163, 184, 0.1);

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

  --glass-bg: rgba(10, 21, 32, 0.7);
  --glass-border: rgba(255, 255, 255, 0.05);

  --mesh-color: rgba(255, 255, 255, 0.03);
}