/* 
==========================================
101 Dance Studio - Color Palette
สีม่วงลาเวนเดอร์ + ทอง (Lavender Purple + Gold)
เรียบง่ายและทันสมัย (Simple & Modern)
==========================================
*/

/* ==========================================
   สีม่วงลาเวนเดอร์ (Lavender Purple Colors)
   ========================================== */

/* สีหลัก - Lavender Purple */
:root {
  --lavender-primary: #9674C8;        /* สีม่วงลาเวนเดอร์หลัก */
  --lavender-dark: #6B4C9A;           /* สีม่วงเข้ม สำหรับ hover */
  --lavender-light: #B8A3D4;          /* สีม่วงอ่อน สำหรับพื้นหลัง */
  --lavender-pale: #E6DCF2;            /* สีม่วงจาง สำหรับพื้นหลังอ่อน */
  --lavender-accent: #C8B5E3;         /* สีม่วงเน้น */
  --lavender-black-dark: #2C2C2C;     /* สีม่วงดำ */
  /* ==========================================
     สีทอง (Gold Colors)
     ========================================== */
  
  --gold-primary: #D4AF37;             /* สีทองหลัก */
  --gold-dark: #B8941E;               /* สีทองเข้ม */
  --gold-light: #E5C866;               /* สีทองอ่อน */
  --gold-pale: #F4E8B7;                /* สีทองจาง */
  --gold-accent: #FFD700;              /* สีทองเน้น */
  
  /* ==========================================
     สีเสริมอื่นๆ
     ========================================== */
  
  --text-dark: #2C2C2C;                /* สีข้อความเข้ม */
  --text-light: #666666;               /* สีข้อความอ่อน */
  --bg-white: #FFFFFF;                 /* พื้นหลังขาว */
  --bg-light: #F9F9F9;                 /* พื้นหลังอ่อน */
}

/* ==========================================
   ตัวอย่างการใช้งาน
   ========================================== */

/* Background Colors */
.bg-lavender-primary { background-color: var(--lavender-primary); }
.bg-lavender-dark { background-color: var(--lavender-dark); }
.bg-lavender-light { background-color: var(--lavender-light); }
.bg-lavender-pale { background-color: var(--lavender-pale); }

.bg-gold-primary { background-color: var(--gold-primary); }
.bg-gold-dark { background-color: var(--gold-dark); }
.bg-gold-light { background-color: var(--gold-light); }
.bg-gold-pale { background-color: var(--gold-pale); }

/* Text Colors */
.text-lavender-primary { color: var(--lavender-primary); }
.text-lavender-dark { color: var(--lavender-dark); }
.text-gold-primary { color: var(--gold-primary); }
.text-gold-dark { color: var(--gold-dark); }

/* Border Colors */
.border-lavender { border-color: var(--lavender-primary); }
.border-gold { border-color: var(--gold-primary); }

/* Button Styles */
.btn-lavender {
  background-color: var(--lavender-primary);
  color: #FFFFFF;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-lavender:hover {
  background-color: var(--lavender-dark);
}

.btn-gold {
  background-color: var(--gold-primary);
  color: #FFFFFF;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: var(--gold-dark);
}

/* Gradient Examples */
.gradient-lavender-gold {
  background: linear-gradient(135deg, var(--lavender-primary) 0%, var(--gold-primary) 100%);
}

.gradient-lavender {
  background: linear-gradient(135deg, var(--lavender-light) 0%, var(--lavender-primary) 100%);
}

/* ==========================================
   Color Codes Reference (สำหรับใช้ใน CSS)
   ========================================== */

/*
สีม่วงลาเวนเดอร์:
- หลัก: #9674C8
- เข้ม: #6B4C9A
- อ่อน: #B8A3D4
- จาง: #E6DCF2

สีทอง:
- หลัก: #D4AF37
- เข้ม: #B8941E
- อ่อน: #E5C866
- จาง: #F4E8B7
- เน้น: #FFD700

RGB Values:
- Lavender Primary: rgb(150, 116, 200)
- Gold Primary: rgb(212, 175, 55)

RGBA Values (with transparency):
- Lavender Primary (50%): rgba(150, 116, 200, 0.5)
- Gold Primary (50%): rgba(212, 175, 55, 0.5)
*/