/**
 * Public Theme Tokens - Thuê Xe Kim Ngọc
 * Professional Green/White Theme
 *
 * LIGHT MODE: Clean white/gray backgrounds with green accents
 * DARK MODE: Dark blue-green surfaces with emerald accents
 *
 * @version 2.0.0
 * @project Thuê Xe Kim Ngọc
 */

/* ============================================
   LIGHT MODE TOKENS (Default)
   Clean, professional, white/gray backgrounds
   ============================================ */

:root,
[data-theme="light"] {
  /* Page Background - Clean Gray */
  --kg-page-bg: #F9FAFB;
  --kg-section-bg: #FFFFFF;
  --kg-section-bg-alt: #F3F4F6;
  --kg-surface: #FFFFFF;
  --kg-surface-soft: #F9FAFB;
  --kg-card-bg: #FFFFFF;

  /* Header - White glass with green accent */
  --kg-header-bg: rgba(255, 255, 255, 0.96);
  --kg-header-bg-2: #F9FAFB;

  /* Footer - Professional Dark Green */
  --kg-footer-bg: #064E3B;
  --kg-footer-scene-bg: #065F46;

  /* Text - Clean Dark */
  --kg-text: #1F2937;
  --kg-text-soft: #4B5563;
  --kg-text-on-dark: #FFFFFF;
  --kg-muted: #6B7280;
  --kg-muted-on-dark: rgba(255, 255, 255, 0.75);

  /* Borders - Subtle Gray */
  --kg-border: rgba(107, 114, 128, 0.15);
  --kg-border-soft: rgba(107, 114, 128, 0.10);
  --kg-border-on-dark: rgba(255, 255, 255, 0.15);

  /* Accents - Green CTA */
  --kg-accent: #059669;
  --kg-accent-2: #10B981;
  --kg-emerald-dark: #047857;

  /* Dropdown - Clean white */
  --kg-dropdown-bg: rgba(255, 255, 255, 0.98);
  --kg-dropdown-card: rgba(255, 255, 255, 0.98);

  /* Radius */
  --kg-radius-card: 22px;
  --kg-radius-panel: 30px;

  /* Shadows - Subtle */
  --kg-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.06);
  --kg-shadow-card: 0 16px 48px rgba(0, 0, 0, 0.08);

  /* Legacy Aliases */
  --primary: var(--kg-accent);
  --primary-dark: var(--kg-emerald-dark);
  --secondary: var(--kg-accent-2);
  --success: #059669;
  --danger: #DC2626;
  --warning: var(--kg-accent);

  /* Component Variables */
  --background: var(--kg-page-bg);
  --surface: var(--kg-surface);
  --card-bg: var(--kg-card-bg);
  --text: var(--kg-text);
  --text-light: var(--kg-muted);
  --border: var(--kg-border);

  --header-bg: var(--kg-header-bg);
  --header-border: var(--kg-border);
  --header-text: var(--kg-text);

  --footer-bg: var(--kg-footer-bg);
  --footer-text: var(--kg-text-on-dark);
  --footer-muted: var(--kg-muted-on-dark);

  --dropdown-bg: var(--kg-dropdown-bg);
  --dropdown-border: var(--kg-border);
  --dropdown-radius: 20px;
  --dropdown-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* ============================================
   DARK MODE TOKENS
   Dark blue-green, clean and professional
   ============================================ */

[data-theme="dark"] {
  /* Page Background - Dark Blue-Green */
  --kg-page-bg: #0F172A;
  --kg-section-bg: #1E293B;
  --kg-section-bg-alt: #334155;
  --kg-surface: #1E293B;
  --kg-surface-soft: #334155;
  --kg-card-bg: #334155;

  /* Header - Dark Blue-Green */
  --kg-header-bg: #0F172A;
  --kg-header-bg-2: #1E293B;

  /* Footer - Dark Green */
  --kg-footer-bg: #064E3B;
  --kg-footer-scene-bg: #065F46;

  /* Text - Light */
  --kg-text: #F8FAFC;
  --kg-text-soft: #CBD5E1;
  --kg-text-on-dark: #FFFFFF;
  --kg-muted: #94A3B8;
  --kg-muted-on-dark: rgba(255, 255, 255, 0.75);

  /* Borders - Subtle Light */
  --kg-border: rgba(255, 255, 255, 0.12);
  --kg-border-soft: rgba(255, 255, 255, 0.08);
  --kg-border-on-dark: rgba(255, 255, 255, 0.15);

  /* Accents - Emerald */
  --kg-accent: #10B981;
  --kg-accent-2: #34D399;
  --kg-emerald-dark: #059669;

  /* Dropdown - Dark glass */
  --kg-dropdown-bg: rgba(15, 23, 42, 0.98);
  --kg-dropdown-card: rgba(30, 41, 59, 0.98);

  /* Shadows - Deeper for dark */
  --kg-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.24);
  --kg-shadow-card: 0 30px 80px rgba(0, 0, 0, 0.34);

  /* Component Variables */
  --background: var(--kg-page-bg);
  --surface: var(--kg-surface);
  --card-bg: var(--kg-card-bg);
  --text: var(--kg-text);
  --text-light: var(--kg-muted);
  --border: var(--kg-border);

  --header-bg: var(--kg-header-bg);
  --header-border: var(--kg-border-on-dark);
  --header-text: var(--kg-text-on-dark);

  --footer-bg: var(--kg-footer-bg);
  --footer-text: var(--kg-text-on-dark);
  --footer-muted: var(--kg-muted-on-dark);

  --dropdown-bg: var(--kg-dropdown-bg);
  --dropdown-border: var(--kg-border-on-dark);
}

/* ============================================
   ZALO BUTTON EXCEPTION
   Zalo is ALLOWED to use blue
   ============================================ */
--zalo-bg: #0068ff;
--zalo-bg-hover: #0052cc;

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text */
.text-kg-accent { color: var(--kg-accent); }
.text-kg-emerald { color: var(--kg-accent-2); }
.text-kg-muted { color: var(--kg-muted); }
.text-kg-soft { color: var(--kg-text-soft); }
.text-on-dark { color: var(--kg-text-on-dark); }

/* Backgrounds */
.bg-kg-page { background: var(--kg-page-bg); }
.bg-kg-section { background: var(--kg-section-bg); }
.bg-kg-section-alt { background: var(--kg-section-bg-alt); }
.bg-kg-surface { background: var(--kg-surface); }
.bg-kg-surface-soft { background: var(--kg-surface-soft); }
.bg-kg-card { background: var(--kg-card-bg); }
.bg-kg-header { background: var(--kg-header-bg); }
.bg-kg-footer { background: var(--kg-footer-bg); }
.bg-kg-dropdown { background: var(--kg-dropdown-bg); }
.bg-kg-accent { background: var(--kg-accent); }

/* Borders */
.border-kg { border: 1px solid var(--kg-border); }
.border-kg-soft { border: 1px solid var(--kg-border-soft); }
.border-kg-on-dark { border: 1px solid var(--kg-border-on-dark); }

/* Shadows */
.shadow-kg-soft { box-shadow: var(--kg-shadow-soft); }
.shadow-kg-card { box-shadow: var(--kg-shadow-card); }

/* Radius */
.radius-kg-card { border-radius: var(--kg-radius-card); }
.radius-kg-panel { border-radius: var(--kg-radius-panel); }