/* ==========================================================================
   DESIGN TOKENS - OI PHÁI SINH DASHBOARD
   ========================================================================== */

:root {
  /* Brand & Core Palette */
  --brand-primary: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  
  /* Semantic Market Colors */
  --pos: #0d8a4e;
  --pos-hover: #0a6c3d;
  --pos-bg: rgba(13, 138, 78, 0.08);
  --pos-border: rgba(13, 138, 78, 0.22);

  --neg: #dc2626;
  --neg-hover: #b91c1c;
  --neg-bg: rgba(220, 38, 38, 0.08);
  --neg-border: rgba(220, 38, 38, 0.22);

  --neutral: #64748b;
  --neutral-bg: rgba(100, 116, 139, 0.08);
  --neutral-border: rgba(100, 116, 139, 0.2);

  /* Investor Groups Identity */
  --s-nn: #2563eb;       /* Khối Ngoại - Xanh dương */
  --s-td: #059669;       /* Tự doanh - Xanh ngọc */
  --s-nk: #ea580c;       /* NĐT Khác - Cam */

  /* Neutral Surface Palette (Light Mode Default) */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-surface-3: #e2e8f0;
  
  /* Text & Inks */
  --ink-primary: #0f172a;
  --ink-secondary: #334155;
  --ink-muted: #64748b;
  --ink-faint: #94a3b8;
  --ink-inverse: #ffffff;

  /* Borders & Dividers */
  --line-subtle: #f1f5f9;
  --line-normal: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Be Vietnam Pro", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout Widths */
  --max-content-width: 1200px;
  --header-height: 64px;

  color-scheme: light;
}

/* Dark Mode Tokens */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0b0f17;
    --bg-surface: #131a26;
    --bg-surface-2: #1b2333;
    --bg-surface-3: #242f44;

    --ink-primary: #f8fafc;
    --ink-secondary: #cbd5e1;
    --ink-muted: #94a3b8;
    --ink-faint: #64748b;
    --ink-inverse: #0f172a;

    --line-subtle: #192233;
    --line-normal: #232e42;
    --line-strong: #334155;

    --pos: #22c55e;
    --pos-bg: rgba(34, 197, 94, 0.12);
    --pos-border: rgba(34, 197, 94, 0.28);

    --neg: #ef4444;
    --neg-bg: rgba(239, 68, 68, 0.12);
    --neg-border: rgba(239, 68, 68, 0.28);

    --s-nn: #3b82f6;
    --s-td: #10b981;
    --s-nk: #f97316;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg-page: #0b0f17;
  --bg-surface: #131a26;
  --bg-surface-2: #1b2333;
  --bg-surface-3: #242f44;

  --ink-primary: #f8fafc;
  --ink-secondary: #cbd5e1;
  --ink-muted: #94a3b8;
  --ink-faint: #64748b;
  --ink-inverse: #0f172a;

  --line-subtle: #192233;
  --line-normal: #232e42;
  --line-strong: #334155;

  --pos: #22c55e;
  --pos-bg: rgba(34, 197, 94, 0.12);
  --pos-border: rgba(34, 197, 94, 0.28);

  --neg: #ef4444;
  --neg-bg: rgba(239, 68, 68, 0.12);
  --neg-border: rgba(239, 68, 68, 0.28);

  --s-nn: #3b82f6;
  --s-td: #10b981;
  --s-nk: #f97316;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}