/**
 ═══════════════════════════════════════════════════════════════════
 * AURA CAFE · BRAND TOKENS v5.0 — BAZI ALIGNED
 ═══════════════════════════════════════════════════════════════════
 * Aligned with: Bát tự chủ quán NGUYỄN HỮU CÒN
 *               (Nhật chủ 壬 Thủy Dương, 8/2/1982 21:00)
 *               Đại vận 丙午 Bính Ngọ (Hỏa, 2020-2029)
 *
 * Element DNA   : 水 Thủy (Water) — Noir Lounge
 * Element flow  : 庚辛 Kim sinh 壬 Thủy → ACCENT phải là BẠC/CHROME
 * Font          : Cormorant Garamond + Space Grotesk
 * Brand         : AURA CAFE (39 Nguyễn Tất Thành, Sa Đéc)
 * Version       : 5.0.0 · 2026-05-10
 *
 * ─── v5 changes from v4 ──────────────────────────────────────────
 * • REVERT: Gold Metallic (#D4AF37, #FFD700, #B8860B) — Thổ khắc Thủy
 * • NEW:    Chrome/Silver palette (#C9D6DF, #6B9FB8, #3A6B80) — Kim sinh Thủy
 * • Font:   Playfair Display → Cormorant Garamond
 * • Font:   Manrope → Space Grotesk
 * • ADD:    Mộc zone tokens (cho bar — hóa giải nhân sự Hỏa)
 ═══════════════════════════════════════════════════════════════════
 */

:root {
  /* ════════════════ 1. COLOR SYSTEM — 壬 Thủy × 庚 Kim ════════════════ */

  /* 壬 THỦY — Primary surfaces (Nhật chủ chủ quán) */
  --aura-noir-void:   #050D1A;   /* Vực Thẳm — page bg */
  --aura-noir-deep:   #0A1A2E;   /* Đêm Biển — PRIMARY card */
  --aura-noir-mid:    #1A2A4E;   /* Đại Dương — surface */
  --aura-noir-bright: #25406B;   /* Lifted radial center */
  --aura-noir-steel:  #334155;   /* Hover/borders */

  /* 庚辛 KIM — Accent (Kim sinh Thủy ✓) */
  --aura-chrome-bright: #E8EEF3; /* Mirror white */
  --aura-chrome-light:  #C9D6DF; /* Bạc Kim — MAIN ACCENT */
  --aura-chrome-mid:    #6B9FB8; /* Chrome */
  --aura-chrome-dark:   #3A6B80; /* Steel blue */

  /* 乙 MỘC — Bar zone (decouple khỏi Tú, dùng cho hóa giải hướng Nam + nhân sự Hỏa) */
  --aura-moc-deep:    #1A2D1F;   /* Rừng Sâu */
  --aura-moc-primary: #2D5A3D;   /* Forest */
  --aura-moc-light:   #4A7C59;   /* Jade */
  --aura-moc-pale:    #A8C5A0;   /* Sương Mai */

  /* Neutrals */
  --aura-text-primary: #F5F5F5;
  --aura-text-body:    #C5C8CC;
  --aura-text-muted:   #8A8E96;

  /* Borders */
  --aura-border-chrome: rgba(201,214,223,0.25);
  --aura-border-soft:   rgba(255,255,255,0.06);
  --aura-border-strong: rgba(201,214,223,0.45);

  /* Semantic */
  --aura-success: #4CAF50;
  --aura-warning: #6B9FB8;   /* Chrome (vẫn Kim — không dùng amber/Hỏa) */
  --aura-danger:  #DC2626;
  --aura-info:    #6B9FB8;

  /* ════════════════ 2. TYPOGRAPHY ════════════════ */

  --aura-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --aura-font-body:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --aura-font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Font scale */
  --aura-fs-display: clamp(48px, 8vw, 80px);
  --aura-fs-hero:    clamp(32px, 5vw, 56px);
  --aura-fs-h1:      clamp(28px, 4vw, 42px);
  --aura-fs-h2:      clamp(22px, 3vw, 32px);
  --aura-fs-h3:      20px;
  --aura-fs-body:    16px;
  --aura-fs-sm:      14px;
  --aura-fs-xs:      12px;
  --aura-fs-label:   11px;

  --aura-ls-hero:   12px;
  --aura-ls-title:   6px;
  --aura-ls-label:   4px;
  --aura-ls-button:  1px;

  --aura-lh-tight: 1.2;
  --aura-lh-body:  1.6;
  --aura-lh-loose: 1.8;

  --aura-fw-light:    300;
  --aura-fw-regular:  400;
  --aura-fw-medium:   500;
  --aura-fw-semibold: 600;
  --aura-fw-bold:     700;

  /* ════════════════ 3-9. SPACING/RADIUS/SHADOWS/etc ════════════════ */
  /* (preserve from v4 — không liên quan palette) */

  --aura-space-xs:  4px;
  --aura-space-sm:  8px;
  --aura-space-md:  16px;
  --aura-space-lg:  24px;
  --aura-space-xl:  40px;
  --aura-space-2xl: 64px;
  --aura-space-3xl: 100px;

  --aura-radius-sm:   4px;
  --aura-radius-md:   8px;
  --aura-radius-lg:   16px;
  --aura-radius-xl:   24px;
  --aura-radius-pill: 50px;

  --aura-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --aura-shadow-md: 0 8px 30px rgba(0,0,0,0.18);
  --aura-shadow-lg: 0 16px 60px rgba(0,0,0,0.45);

  /* Chrome glow — replace gold glow */
  --aura-glow-chrome:        0 0 30px rgba(201,214,223,0.25);
  --aura-glow-chrome-strong: 0 0 60px rgba(232,238,243,0.4);
  --aura-glow-navy:          0 0 40px rgba(10,26,46,0.6);

  /* Gradients */
  --aura-grad-chrome:      linear-gradient(135deg, #C9D6DF 0%, #E8EEF3 100%);
  --aura-grad-chrome-cool: linear-gradient(135deg, #3A6B80 0%, #6B9FB8 100%);
  --aura-grad-noir:        linear-gradient(135deg, #0A1A2E 0%, #1A2A4E 100%);
  --aura-grad-noir-chrome: linear-gradient(135deg, #0A1A2E 0%, #1A2A4E 60%, #C9D6DF 100%);
  --aura-grad-water-ripple: linear-gradient(135deg,
    rgba(201,214,223,0.05) 0%,
    rgba(107,159,184,0.10) 35%,
    rgba(201,214,223,0.05) 65%,
    rgba(10,26,46,0.0) 100%);

  /* Timing/Z-index/Containers (preserve from v4) */
  --aura-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --aura-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --aura-ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --aura-duration-fast: 150ms;
  --aura-duration-base: 300ms;
  --aura-duration-slow: 600ms;

  --aura-z-base:    0;
  --aura-z-sticky:  50;
  --aura-z-overlay: 100;
  --aura-z-modal:   200;
  --aura-z-toast:   300;

  --aura-max-narrow:  720px;
  --aura-max-content: 1100px;
  --aura-max-wide:    1200px;

  /* ════════════════ 10. LEGACY ALIASES — backward compat ════════════════ */
  /* All old gold tokens map to new chrome values — không break legacy code */

  --aura-gold-primary:  var(--aura-chrome-light);
  --aura-gold-bright:   var(--aura-chrome-bright);
  --aura-gold-cool:     var(--aura-chrome-dark);
  --aura-gold-deep:     var(--aura-chrome-dark);
  --aura-gold-warm:     var(--aura-chrome-mid);
  --aura-gold-master:   var(--aura-chrome-light);
  --aura-gold-electric: var(--aura-chrome-bright);
  --aura-gold-matte:    var(--aura-chrome-dark);
  --aura-gold-metallic: var(--aura-chrome-light);
  --aura-gold-amber:    var(--aura-chrome-mid);
  --aura-warm-amber:    var(--aura-chrome-mid);

  --aura-silver-primary: var(--aura-chrome-light);
  --aura-silver-bright:  var(--aura-chrome-bright);
  --aura-silver-cool:    var(--aura-chrome-mid);
  --aura-silver-deep:    var(--aura-chrome-dark);
  --aura-silver-warm:    var(--aura-chrome-mid);

  --aura-border-gold:   var(--aura-border-chrome);
  --aura-border-silver: var(--aura-border-chrome);

  --aura-grad-gold:       var(--aura-grad-chrome);
  --aura-grad-gold-cool:  var(--aura-grad-chrome-cool);
  --aura-grad-noir-gold:  var(--aura-grad-noir-chrome);
  --aura-grad-radial-gold: radial-gradient(ellipse at center, rgba(201,214,223,0.14) 0%, transparent 70%);
  --aura-grad-silver:        var(--aura-grad-chrome);
  --aura-grad-silver-cool:   var(--aura-grad-chrome-cool);
  --aura-grad-noir-silver:   var(--aura-grad-noir-chrome);
  --aura-grad-radial-silver: var(--aura-grad-radial-gold);

  --aura-glow-gold:        var(--aura-glow-chrome);
  --aura-glow-gold-strong: var(--aura-glow-chrome-strong);
  --aura-glow-silver:        var(--aura-glow-chrome);
  --aura-glow-silver-strong: var(--aura-glow-chrome-strong);

  --aura-debossing: inset 0 2px 4px rgba(0,0,0,0.6),
                    inset 0 -1px 2px rgba(201,214,223,0.08);

  /* Generic short aliases */
  --bg-primary:    var(--aura-noir-void);
  --bg-surface:    var(--aura-noir-deep);
  --gold-master:   var(--aura-chrome-light);
  --gold-electric: var(--aura-chrome-bright);
  --gold-matte:    var(--aura-chrome-dark);
  --amber-neon:    var(--aura-chrome-mid);
  --text-body:     var(--aura-text-body);
  --text-white:    var(--aura-text-primary);
  --gradient-gold: var(--aura-grad-chrome);
  --glow-gold:     var(--aura-glow-chrome);
  --border-gold:   1px solid var(--aura-border-chrome);
  --font-display:  var(--aura-font-display);
  --font-body:     var(--aura-font-body);
  --font-mono:     var(--aura-font-mono);
  --max-width:     var(--aura-max-wide);

  --bg:      var(--aura-noir-void);
  --section: var(--aura-noir-deep);
  --card:    var(--aura-noir-deep);
  --gold:    var(--aura-chrome-light);
  --gold-e:  var(--aura-chrome-bright);
  --matte:   var(--aura-chrome-dark);
  --amber:   var(--aura-chrome-mid);
  --silver:  var(--aura-chrome-light);
  --silver-e:var(--aura-chrome-bright);
  --navy:    var(--aura-noir-void);
  --white:   var(--aura-text-primary);
  --txt:     var(--aura-text-body);
  --green:   var(--aura-success);
  --red:     var(--aura-danger);
  --fd:      var(--aura-font-display);
  --fb:      var(--aura-font-body);
  --fm:      var(--aura-font-mono);
}

/* ════════════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES — preserve all from v4 but values reference v5 tokens  */
/* ════════════════════════════════════════════════════════════════════ */

.aura-hero-title {
  font-family: var(--aura-font-display);
  font-size: var(--aura-fs-display);
  color: var(--aura-chrome-bright);
  letter-spacing: var(--aura-ls-hero);
  text-transform: uppercase;
  font-weight: var(--aura-fw-bold);
  text-shadow: 0 0 40px rgba(232,238,243,0.25),
               0 0 80px rgba(201,214,223,0.10);
}

.aura-section-label {
  font-family: var(--aura-font-body);
  font-size: var(--aura-fs-label);
  font-weight: var(--aura-fw-semibold);
  letter-spacing: var(--aura-ls-label);
  text-transform: uppercase;
  color: var(--aura-chrome-light);
}

.aura-card-noir {
  background: var(--aura-noir-deep);
  border: 1px solid var(--aura-border-chrome);
  border-radius: var(--aura-radius-lg);
  box-shadow: var(--aura-shadow-md);
  padding: var(--aura-space-lg);
}

.aura-btn-silver,
.aura-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-sm);
  background: var(--aura-grad-chrome);
  color: #0A1A2E;
  font-family: var(--aura-font-body);
  font-size: var(--aura-fs-sm);
  font-weight: var(--aura-fw-semibold);
  padding: 14px 32px;
  border-radius: var(--aura-radius-pill);
  letter-spacing: var(--aura-ls-button);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform var(--aura-duration-base) var(--aura-ease),
              box-shadow var(--aura-duration-base) var(--aura-ease);
}
.aura-btn-silver:hover,
.aura-btn-gold:hover {
  transform: scale(1.02);
  box-shadow: var(--aura-glow-chrome-strong);
}

.aura-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-sm);
  background: transparent;
  color: var(--aura-chrome-light);
  font-family: var(--aura-font-body);
  font-size: var(--aura-fs-sm);
  font-weight: var(--aura-fw-semibold);
  padding: 13px 30px;
  border-radius: var(--aura-radius-pill);
  letter-spacing: var(--aura-ls-button);
  text-transform: uppercase;
  border: 1px solid var(--aura-chrome-light);
  cursor: pointer;
  transition: all var(--aura-duration-base) var(--aura-ease);
}
.aura-btn-ghost:hover {
  background: rgba(201,214,223,0.08);
  box-shadow: var(--aura-glow-chrome);
}

.aura-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aura-space-sm);
  text-align: center;
}
.aura-brand-lockup .lockup-era {
  font-family: var(--aura-font-display);
  font-size: var(--aura-fs-label);
  font-weight: var(--aura-fw-medium);
  letter-spacing: 8px;
  color: var(--aura-chrome-mid);
  text-transform: uppercase;
}
.aura-brand-lockup .lockup-primary {
  font-family: var(--aura-font-display);
  font-size: var(--aura-fs-hero);
  font-weight: var(--aura-fw-bold);
  letter-spacing: var(--aura-ls-hero);
  background: linear-gradient(180deg,#E8EEF3,#C9D6DF,#6B9FB8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  line-height: var(--aura-lh-tight);
}
.aura-brand-lockup .lockup-secondary {
  font-family: var(--aura-font-display);
  font-size: var(--aura-fs-h3);
  font-weight: var(--aura-fw-regular);
  letter-spacing: var(--aura-ls-title);
  color: var(--aura-chrome-mid);
  text-transform: uppercase;
}
.aura-brand-lockup .lockup-tagline {
  font-family: var(--aura-font-body);
  font-size: var(--aura-fs-label);
  font-weight: var(--aura-fw-light);
  letter-spacing: var(--aura-ls-label);
  color: var(--aura-chrome-dark);
  text-transform: uppercase;
}
.aura-brand-lockup .lockup-divider {
  color: var(--aura-chrome-dark);
  letter-spacing: var(--aura-ls-button);
  font-size: var(--aura-fs-xs);
}

.aura-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}