/* Dr Hoàng Tuấn — Lucky Draw Design Tokens
   Palette Brand Guideline v1.2:
     - Tím  #6F2DA8 (primary, headline)
     - Cam  #F48220 (accent, CTA, logo icon HT)
     - Vàng #FFC107 (gold accent, spot ≤ 5% ở marketing UI · nhiều hơn ở stage Gala)
     - Vàng pastel #FFE5A0 · Nền tint tím #FAF8FC · Text #212F3D / #566573
*/

:root {
  /* Brand purple scale — thang tím chuẩn brand */
  --brand-primary: #6F2DA8;
  --brand-primary-dark: #4A1F70;
  --brand-primary-darker: #2C0F49;
  --brand-primary-light: #9B59B6;
  --brand-primary-soft: #D7BDE2;
  --brand-primary-bg: #FAF8FC;

  /* Vàng — brand chuẩn (#FFC107) làm base, thang phụ tự phối */
  --brand-gold: #FFC107;
  --brand-gold-strong: #E0A800;
  --brand-gold-light: #FFE5A0;      /* pastel — brand chuẩn */
  --brand-gold-soft:  #FFF3CD;
  --brand-gold-glow:  rgba(255, 193, 7, 0.55);

  /* Gold Gala — hoàng gia, dùng cho stage/kiosk celebration
     (khác với gold accent #FFC107 hơi "amber", gold gala trầm sang hơn). */
  --gala-gold: #E6B23C;
  --gala-gold-strong: #C69A2E;
  --gala-gold-light: #FFE28A;
  --gala-gold-glow:  rgba(230, 178, 60, 0.55);

  /* Cam — brand accent (logo icon HT, CTA phụ) */
  --brand-orange: #F48220;
  --brand-orange-strong: #D96B0A;
  --brand-orange-light: #FCB679;
  --brand-orange-soft:  #FFF7ED;

  /* Surface */
  --bg: #FAF8FC;
  --surface: #FFFFFF;
  --surface-2: #F4EEFB;
  --surface-dark: #1A0B34;
  --surface-darker: #0E0620;

  /* Text */
  --text-primary: #212F3D;
  --text-secondary: #566573;
  --text-muted: #8A93A0;
  --text-invert: #FFFFFF;
  --text-invert-soft: rgba(255, 255, 255, 0.72);

  /* Semantic */
  --success: #1E8449;
  --success-soft: #E6F4EC;
  --warning: #B7791F;
  --warning-soft: #FEF3C7;
  --danger: #C0392B;
  --danger-soft: #FBEAE7;
  --info: #2874A6;
  --info-soft: #E7F0F8;

  /* Borders / lines */
  --border: #E4DAF0;
  --border-strong: #C9B7DF;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(74, 31, 112, 0.06), 0 1px 3px rgba(74, 31, 112, 0.10);
  --shadow: 0 4px 12px rgba(74, 31, 112, 0.10), 0 2px 4px rgba(74, 31, 112, 0.06);
  --shadow-lg: 0 12px 32px rgba(74, 31, 112, 0.18), 0 4px 12px rgba(74, 31, 112, 0.08);
  --shadow-gold: 0 0 0 4px rgba(230, 178, 60, 0.20), 0 12px 40px rgba(230, 178, 60, 0.35);

  /* Font */
  --font-sans: "Calibri", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-num: "Calibri", "Segoe UI", -apple-system, sans-serif;
  --num-features: "tnum" 1, "lnum" 1;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 60px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Dark presentation surface — used cho draw screen full màn hình */
.stage-dark {
  --bg: #0E0620;
  --surface: #1A0B34;
  --surface-2: #241245;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.5);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
}