: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-lavender: #F5E8F6;
  --pl-blush: #F8DFE6;
  --pl-mint: #DBF2E8;
  --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-5: 1.25rem; /* 20px */
  --pl-space-6: 1.5rem;  /* 24px */
  --pl-space-7: 1.75rem; /* 28px */
  --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 */

  /* Glassmorphism & Modern Awwwards Tokens */
  --pl-glass-bg: rgba(255, 255, 255, 0.88);
  --pl-glass-border: rgba(112, 65, 123, 0.12);
  --pl-glass-blur: blur(12px);
  --pl-glass-shadow: 0 8px 32px rgba(50, 25, 77, 0.08);

  /* Ambient Glow Gradients */
  --pl-gradient-glow: radial-gradient(circle at 50% 0%, rgba(112, 65, 123, 0.08) 0%, transparent 70%);
  --pl-gradient-accent: linear-gradient(135deg, var(--pl-primary), var(--pl-rose));
  --pl-gradient-hero: linear-gradient(115deg, var(--pl-lavender), var(--pl-blush) 65%, var(--pl-cream));

  /* Gamification Foundations Tokens */
  --pl-xp-gold: #f59e0b;
  --pl-xp-bg: #fef3c7;
  --pl-streak-fire: #ea580c;
  --pl-streak-bg: #ffedd5;
  --pl-level-purple: #7c3aed;
  --pl-level-bg: #ede9fe;
}