:root {
  /* ==========================================================================
     Thai PW Hub Design Tokens - Liquid Glass Master Kit
     Burgundy · Peach · Old Rose (WO#01 Revision 2)
     ========================================================================== */

  /* Primary Brand Colors */
  --primary-burgundy: #831843;         /* Imperial Rich Burgundy */
  --primary-deep-wine: #2D0810;        /* Deep Wine Slate (ข้อความหลัก คมชัดสูงสุด) */
  --primary-crimson: #BE123C;          /* Bright Crimson Rose */
  --primary-wine-dark: #58111A;        /* Deep pressed jelly edge */
  --primary-glow: rgba(131, 24, 67, 0.35);

  /* Secondary Accents */
  --accent-peach: #FFAB91;             /* Luminous Warm Peach */
  --accent-peach-light: #FFD1C4;       /* Soft Peach Highlight */
  --accent-peach-glow: rgba(255, 171, 145, 0.45);

  --accent-oldrose: #C08081;           /* Classic Old Rose */
  --accent-oldrose-light: #D68C98;     /* Dusty Rose Accent */
  --accent-oldrose-border: rgba(192, 128, 129, 0.35);

  /* Gold Academic Honors */
  --accent-gold: #D4AF37;
  --accent-gold-light: #FEF08A;
  --accent-amber: #B45309;

  /* True Liquid Glass Surfaces (ความโปร่งใสสูง เห็นทะลุริบบิ้นทอง) */
  --glass-base-bg: rgba(255, 255, 255, 0.22);
  --glass-card-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 214, 201, 0.26) 42%,
    rgba(240, 192, 203, 0.22) 74%,
    rgba(255, 171, 145, 0.14) 100%
  );
  --glass-card-hover-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(255, 205, 190, 0.32) 42%,
    rgba(246, 198, 210, 0.28) 74%,
    rgba(255, 171, 145, 0.18) 100%
  );
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 100%);

  /* Specular Bevel Highlights & Borders */
  --glass-border: 1.5px solid rgba(255, 255, 255, 0.75);
  --glass-border-hover: 1.5px solid rgba(255, 171, 145, 0.85);
  --glass-bevel-highlight: inset 0 2px 2px rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(131, 24, 67, 0.12);

  /* Liquid Glass Multi-Tier Shadows (ทอดเงาลอยเด่นบน wallpaper.jpg) */
  --glass-slab-shadow:
    0 24px 48px -8px rgba(46, 8, 16, 0.14),
    0 8px 16px -4px rgba(0, 0, 0, 0.05),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 2px rgba(192, 128, 129, 0.20);

  --glass-card-hover-shadow:
    0 32px 64px -10px rgba(131, 24, 67, 0.22),
    0 12px 28px -4px rgba(255, 171, 145, 0.35),
    inset 0 2.5px 2px #FFFFFF,
    inset 0 -2px 3px rgba(192, 128, 129, 0.30);

  /* 3D Liquid Jelly Capsule Button (ตาม download.jpg) */
  --btn-jelly-bg: linear-gradient(180deg, #BE123C 0%, #831843 55%, #58111A 100%);
  --btn-jelly-bg-hover: linear-gradient(180deg, #D61E4B 0%, #9F1239 55%, #6B1032 100%);
  --btn-jelly-highlight: inset 0 2.5px 1.5px rgba(255, 255, 255, 0.85), inset 0 -2.5px 3px rgba(0, 0, 0, 0.35);
  --btn-jelly-shadow: 0 10px 24px -2px rgba(159, 18, 57, 0.45), 0 4px 0 #470D18;

  /* Legacy aliases (คงความเข้ากันได้กับคอมโพเนนต์เดิมทั้งพอร์ทัล) */
  --primary: var(--primary-burgundy);
  --primary-dark: var(--primary-wine-dark);
  --primary-deep: var(--primary-deep-wine);
  --primary-hover: var(--primary-crimson);
  --primary-mint: var(--primary-crimson);
  --primary-light-mint: var(--accent-peach);
  --primary-pale-mint: var(--accent-peach-light);
  --primary-aurora: rgba(255, 171, 145, 0.22);

  --bg-base: #FFF9F6;
  --bg-subtle: #FDEBE4;
  --bg-surface: var(--glass-base-bg);
  --bg-surface-hover: rgba(255, 255, 255, 0.36);
  --bg-glass: rgba(255, 255, 255, 0.30);
  --bg-glass-card: var(--glass-card-bg);

  --border-subtle: rgba(255, 255, 255, 0.55);
  --border-highlight: rgba(255, 171, 145, 0.85);
  --border-glow: rgba(131, 24, 67, 0.35);

  --text-main: var(--primary-deep-wine);
  --text-muted: #5B2A35;
  --text-dim: #8A6470;
  --text-on-accent: #FFFFFF;

  /* Typography */
  --font-display: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-formal: 'TH Sarabun New', 'Prompt', sans-serif;

  /* 3D Tactile Buttons Tokens (aliased to liquid jelly) */
  --btn-3d-bg: var(--btn-jelly-bg);
  --btn-3d-bevel-top: inset 0 2.5px 1.5px rgba(255, 255, 255, 0.85);
  --btn-3d-bevel-bot: inset 0 -2.5px 3px rgba(0, 0, 0, 0.35);
  --btn-3d-edge: #470D18;
  --btn-3d-shadow: var(--btn-jelly-shadow);
  --btn-3d-hover-shadow: 0 14px 30px -2px rgba(190, 18, 60, 0.55), 0 5px 0 #470D18;
  --btn-3d-active-shadow: 0 2px 0 #470D18, 0 4px 10px rgba(46, 8, 16, 0.3);

  /* Elevations & Shadows */
  --shadow-sm: 0 8px 20px rgba(46, 8, 16, 0.08);
  --shadow-md: 0 16px 36px rgba(46, 8, 16, 0.12);
  --shadow-lg: 0 30px 60px rgba(46, 8, 16, 0.18);
  --shadow-glow: 0 0 35px var(--primary-glow);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark Theme Variables (Imperial Burgundy Night — ยังคงภาษากระจกเหลว) */
[data-theme="dark"] {
  --glass-base-bg: rgba(46, 8, 16, 0.42);
  --glass-card-bg: linear-gradient(
    135deg,
    rgba(131, 24, 67, 0.42) 0%,
    rgba(88, 17, 26, 0.34) 45%,
    rgba(46, 8, 16, 0.30) 100%
  );
  --glass-card-hover-bg: linear-gradient(
    135deg,
    rgba(159, 18, 57, 0.50) 0%,
    rgba(131, 24, 67, 0.40) 45%,
    rgba(88, 17, 26, 0.36) 100%
  );

  --glass-border: 1.5px solid rgba(255, 209, 196, 0.42);
  --glass-border-hover: 1.5px solid rgba(255, 171, 145, 0.75);
  --glass-bevel-highlight: inset 0 2px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.35);

  --glass-slab-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.55),
    0 8px 16px -4px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.35),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.30);

  --glass-card-hover-shadow:
    0 32px 64px -10px rgba(0, 0, 0, 0.62),
    0 12px 28px -4px rgba(255, 171, 145, 0.22),
    inset 0 2.5px 2px rgba(255, 255, 255, 0.40),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);

  --bg-base: #14060C;
  --bg-subtle: #240A14;
  --bg-surface: var(--glass-base-bg);
  --bg-surface-hover: rgba(131, 24, 67, 0.30);
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-glass-card: var(--glass-card-bg);

  --border-subtle: rgba(255, 209, 196, 0.20);
  --border-highlight: rgba(255, 171, 145, 0.60);
  --border-glow: rgba(255, 171, 145, 0.45);

  --text-main: #FFF3F0;
  --text-muted: #F2D5D8;
  --text-dim: #C9A2AC;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.60);
}