:root {
  /* Font */
  --font-stack: "SF Pro Display", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-stack); /* backward compat — reset.css dùng var(--font) */

  /* Layout */
  --appbar-h: 56px;           /* Mobile default (Rule-U01) */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --modal-w: 600px;
  --btn-h: 44px;

  /* Animation */
  --anim: 200ms;
  --anim-slow: 260ms;

  /* Radius — Material Design 3 */
  --radius: 12px;
  --radius-sm: 6px;    /* chip, badge nhỏ */
  --radius-lg: 16px;   /* card, modal */

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(12px);

  /* Neumorphism Branding — Soft UI refinement (Phase 5) */
  --nm-bg: var(--bg);
  --nm-light: #ffffff;
  --nm-dark: #d1d9e6;
  --nm-flat: 6px 6px 12px var(--nm-dark), -6px -6px 12px var(--nm-light);
  --nm-inset: inset 4px 4px 8px var(--nm-dark), inset -4px -4px 8px var(--nm-light);
  --nm-anim: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --nm-float: 10px 10px 20px var(--nm-dark), -10px -10px 20px var(--nm-light);
  
  /* Neumorphism on Colors */
  --nm-primary-light: #155EB2;
  --nm-primary-dark: #073061;
  --nm-accent-light: #FCBA4E;
  --nm-accent-dark: #B85A00;

  /* Petrolimex Brand Colors */
  --primary: #0A54A8;
  --primary-2: #083d7a;       /* backward compat */
  --primary-dark: #155EB2;
  --primary-light: #188CD3;
  --accent: #F88126;
  --accent-2: #e06d10;        /* backward compat */
  --accent-light: #FCBA4E;
  --success: #19A942;
  --danger: #e53935;
  --danger-2: #b71c1c;        /* backward compat */

  /* RGB split cho rgba() */
  --primary-rgb: 10,84,168;
  --accent-rgb: 248,129,38;
  --success-rgb: 25,169,66;
  --danger-rgb: 229,57,53;

  /* Derived color variants */
  --success-dark: #128a35;
  --accent-dark: #B85A00;      /* chip text contrast ≥ 4.5:1 */
  --danger-dark: #C62828;      /* chip text contrast ≥ 4.5:1 */
  --ca-3-color: #7C4DFF;
  --ca-3-color-rgb: 124,77,255;
  --primary-deeper: #003D80;

  /* On-brand text — white text trên nền màu đậm (button, chip, avatar) */
  --text-on-brand: #ffffff;

  /* Avatar background palette — pastel tints cho NV list initials */
  --avatar-bg-1: #E8F0FE;
  --avatar-bg-2: #FFF3E0;
  --avatar-bg-3: #E8F5E9;
  --avatar-bg-4: #F3E5F5;
  --avatar-bg-5: #E0F2F1;
  --avatar-bg-6: #FBE9E7;
  --avatar-bg-7: #E8EAF6;
  --avatar-bg-8: #F9FBE7;

  /* Text */
  --text: #261d35;             /* backward compat — reset.css + typography.css dùng var(--text) */
  --text-main: #261d35;
  --text-body: #4D4D4D;
  --text-heading: #1A1A1A;
  --muted: #6b7280;            /* backward compat */

  /* Borders & Surfaces — Optimized for Neumorphism (Meticulous) */
  --border: rgba(0,0,0,0.06);
  --border-2: rgba(0,0,0,0.12);
  --bg: #EBEDF0;              /* Standard Neumorphic gray-white */
  --surface: #EBEDF0;         /* Surface follows bg for NM embed effect */
  --surface-2: #E2E4E7;

  /* Shadows (Legacy support + Mixed mode) */
  --shadow: 4px 4px 10px rgba(0,0,0,.06), -4px -4px 10px rgba(255,255,255,.8);
  --shadow-sm: 2px 2px 5px rgba(0,0,0,.04), -2px -2px 5px rgba(255,255,255,.7);
  --focus: 0 0 0 3px rgba(var(--primary-rgb),.22);

  /* Sidebar */
  --sidebar-bg: linear-gradient(180deg, #0A54A8 0%, #155EB2 100%);
  --sidebar-text: rgba(255,255,255,0.80);
  --sidebar-text-active: #ffffff;

  /* Ca (shift) row colors */
  --ca-1-bg: rgba(25,169,66,.10);
  --ca-2-bg: rgba(248,129,38,.10);
  --ca-3-bg: rgba(124,77,255,.10);
}

/* Desktop override — appbar more spacious */
@media (min-width: 600px) {
  :root {
    --appbar-h: 64px;
  }
}

body.dark {
  --bg: #1c2331;
  --surface: #1c2331;
  --surface-2: #161c28;
  --text: #E2E8F0;
  --text-main: #E2E8F0;
  --text-body: #94A3B8;
  --text-heading: #F1F5F9;
  --muted: #94a3b8;
  --border: rgba(255,255,255,0.05);
  --border-2: rgba(255,255,255,0.1);
  --primary-light: #188CD3;
  --accent: #F88126;
  --accent-2: #e06d10;
  --accent-light: #FCBA4E;
  --shadow: 0 8px 20px rgba(0,0,0,.36);
  --shadow-sm: 0 3px 10px rgba(0,0,0,.28);
  --focus: 0 0 0 3px rgba(var(--primary-rgb),.22);
  --primary-rgb: 10,84,168;
  --accent-rgb: 248,129,38;
  --success-rgb: 25,169,66;

  /* Ca (shift) row colors — dark mode */
  --ca-1-bg: rgba(25,169,66,.15);
  --ca-2-bg: rgba(248,129,38,.12);
  --ca-3-bg: rgba(103,58,183,.15);

  /* Neumorphism Dark Mode (Meticulous refinement) */
  --nm-light: rgba(255, 255, 255, 0.03);
  --nm-dark: rgba(0, 0, 0, 0.25);
  --nm-flat: 6px 6px 12px var(--nm-dark), -4px -4px 8px var(--nm-light);
  --nm-inset: inset 4px 4px 8px var(--nm-dark), inset -2px -2px 4px var(--nm-light);
  
  /* Additional tokens to fix leaks */
  --appbar-bg: var(--surface);
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.12);
}