:root {
  /* Brand & Theme Colors (Tím - Hồng - Kem) */
  --pl-deep: #32194D;
  --pl-primary: #70417B;
  --pl-primary-hover: #5D3268;
  --pl-rose: #EB89A7;
  --pl-pink: #F4B4C4;
  --pl-cream: #FFF0D5;
  --pl-canvas: #FFFDF9;
  --pl-surface: #FFFFFF;
  --pl-text: #4B3A57;
  --pl-muted: #6F6177;
  --pl-border: #E7DFEB;
  --pl-control-border: #8A7792;
  --pl-focus: #70417B;

  /* State Colors */
  --pl-success: #236344;
  --pl-success-bg: #EDF7F0;
  --pl-warning: #795300;
  --pl-warning-bg: #FFF4D6;
  --pl-danger: #A12D45;
  --pl-danger-bg: #FDEEF1;

  /* Typography */
  --pl-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing Scale */
  --pl-space-1: .25rem;  /* 4px */
  --pl-space-2: .5rem;   /* 8px */
  --pl-space-3: .75rem;  /* 12px */
  --pl-space-4: 1rem;    /* 16px */
  --pl-space-6: 1.5rem;  /* 24px */
  --pl-space-8: 2rem;    /* 32px */
  --pl-space-12: 3rem;   /* 48px */

  /* Border Radii */
  --pl-radius-control: .75rem;  /* 12px */
  --pl-radius-card: 1.25rem;   /* 20px */
  --pl-radius-dialog: 1.5rem;  /* 24px */
  --pl-radius-pill: 999px;

  /* Shadows */
  --pl-shadow-sm: 0 2px 8px rgba(50, 25, 77, 0.04);
  --pl-shadow: 0 8px 24px rgba(50, 25, 77, 0.08);
  --pl-shadow-lg: 0 12px 32px rgba(50, 25, 77, 0.12);

  /* Layout dimensions */
  --pl-content-max: 75rem;     /* 1200px */
  --pl-form-max: 47.5rem;      /* 760px */
  --pl-sidebar-width: 15rem;   /* 240px */
  --pl-header-height-mobile: 4rem; /* 64px */
  --pl-header-height-desktop: 4.5rem; /* 72px */
}