/* ============================================================
   NĐH Reader — Design Tokens (redesign 2026)
   Brand-matched to viettelconstruction.com.vn: white surfaces,
   near-black text (#212529), Viettel Construction red #ED1B35,
   Sarabun typeface, clean/corporate with a signature red underline
   accent. LIGHT is the default (:root); DARK is an override under
   <html data-theme="dark">. theme.js toggles it; an inline <head>
   snippet applies the saved choice before paint (no FOUC).
   ============================================================ */

:root {
  /* ---- Brand (constant across themes) ---- */
  --brand-red: #ed1b35;          /* Viettel Construction red */
  --brand-red-700: #c2142a;      /* hover / pressed */
  --brand-red-300: #ff5566;      /* light accent for dark bg */
  --brand-gradient: linear-gradient(135deg, #ed1b35 0%, #ff3b3b 100%);
  --brand-soft: rgba(237, 27, 53, 0.08);
  --brand-ring: rgba(237, 27, 53, 0.26);

  /* ---- Surfaces (LIGHT) ---- */
  --bg: #f5f6f8;                 /* page */
  --bg-2: #eceef2;               /* deeper wash */
  --surface: #ffffff;            /* cards */
  --surface-2: #f4f6f8;          /* inputs / insets */
  --surface-3: #eaecf1;          /* hover fills */
  --border: #e6e8ec;
  --border-strong: #d4d8df;

  /* ---- Text (LIGHT) — matches VCC #212529 ---- */
  --text: #212529;
  --text-secondary: #545b66;
  --text-muted: #919aa6;
  --text-on-brand: #ffffff;

  /* ---- States ---- */
  --success: #1a9b4b;  --success-soft: rgba(26, 155, 75, 0.12);
  --warning: #d97706;  --warning-soft: rgba(217, 119, 6, 0.13);
  --error:   #dc2626;  --error-soft:   rgba(220, 38, 38, 0.10);
  --info:    #2563eb;  --info-soft:    rgba(37, 99, 235, 0.10);
  --accent-cyan: #0891b2;

  /* ---- Elevation (soft, corporate) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.05), 0 1px 3px rgba(20, 23, 28, 0.04);
  --shadow-md: 0 4px 14px rgba(20, 23, 28, 0.07), 0 1px 4px rgba(20, 23, 28, 0.04);
  --shadow-lg: 0 16px 44px rgba(20, 23, 28, 0.10), 0 4px 12px rgba(20, 23, 28, 0.05);
  --shadow-brand: 0 8px 20px rgba(237, 27, 53, 0.22);

  /* ---- Radius (corporate, restrained) ---- */
  --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ---- Typography (Sarabun = VCC site font) ---- */
  --font: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.78rem; --fs-sm: 0.86rem; --fs-base: 0.95rem; --fs-md: 1.05rem;
  --fs-lg: 1.22rem; --fs-xl: 1.55rem; --fs-2xl: 1.95rem;

  /* ---- Motion ---- */
  --t-fast: 130ms ease; --t: 220ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 380ms ease;

  /* ---- Layout ---- */
  --container: 560px;

  /* ---- Decorative background (kept very subtle — corporate clean) ---- */
  --grid-line: rgba(20, 23, 28, 0.035);
  --glow-1: rgba(237, 27, 53, 0.06);
  --glow-2: rgba(237, 27, 53, 0.04);
  --glow-3: rgba(20, 23, 28, 0.03);

  color-scheme: light;
}

[data-theme="dark"] {
  /* ---- Surfaces (DARK) ---- */
  --bg: #0c0f15;
  --bg-2: #0f131b;
  --surface: #161b24;
  --surface-2: #1d2330;
  --surface-3: #262d3c;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text (DARK) ---- */
  --text: #eef1f5;
  --text-secondary: #aab3c0;
  --text-muted: #717c8c;
  --text-on-brand: #ffffff;

  --brand-soft: rgba(255, 85, 102, 0.14);
  --brand-ring: rgba(255, 85, 102, 0.4);

  --success-soft: rgba(26, 155, 75, 0.18);
  --warning-soft: rgba(217, 119, 6, 0.18);
  --error-soft: rgba(220, 38, 38, 0.16);
  --info-soft: rgba(37, 99, 235, 0.18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 10px 26px rgba(237, 27, 53, 0.32);

  --grid-line: rgba(255, 255, 255, 0.04);
  --glow-1: rgba(237, 27, 53, 0.13);
  --glow-2: rgba(237, 27, 53, 0.08);
  --glow-3: rgba(59, 130, 246, 0.08);

  color-scheme: dark;
}