/* ============================================================
   Aurora Glass — Design Tokens (v2)
   Theming qua [data-theme] trên <html>: "dark" (mặc định) | "light".
   Ngày/đêm: header tự set data-theme = light (ngày) / dark (đêm) nếu user chưa chọn.
   data-daypart vẫn dùng cho FX (sao/hạt trong hero).
   ============================================================ */
:root {
  /* — Font — */
  --au-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* — Aurora accent (neon, tươi) — dùng chung 2 theme — */
  --au-teal:   #12dcc0;
  --au-cyan:   #1fd4f2;
  --au-indigo: #5b63ff;
  --au-violet: #ad4dff;
  --au-pink:   #ff4d94;
  --au-primary: var(--kw-primary, var(--au-indigo));
  --au-accent:  var(--au-teal);
  --au-grad: linear-gradient(120deg, #12dcc0 0%, #1fd0f2 36%, #5b63ff 72%, #ad4dff 100%);
  --au-grad-soft: linear-gradient(135deg, rgba(18,220,192,.20), rgba(91,99,255,.20) 60%, rgba(173,77,255,.20));

  /* — Radius — */
  --au-r-sm: 10px; --au-r: 16px; --au-r-lg: 22px; --au-r-xl: 28px; --au-r-pill: 999px;

  /* — Spacing — */
  --au-s1: 4px; --au-s2: 8px; --au-s3: 12px; --au-s4: 16px; --au-s5: 24px; --au-s6: 32px; --au-s7: 48px; --au-s8: 64px;

  /* — Type scale (fluid) — */
  --au-fs-hero:  clamp(3.2rem, 9vw, 6rem);
  --au-fs-h1:    clamp(1.9rem, 4.2vw, 3rem);
  --au-fs-h2:    clamp(1.45rem, 3vw, 2.05rem);
  --au-fs-h3:    clamp(1.2rem, 2.2vw, 1.5rem);
  --au-fs-h4:    clamp(1.05rem, 1.6vw, 1.2rem);
  --au-fs-h5:    .95rem;
  --au-fs-body:  1rem; --au-fs-sm: .875rem; --au-fs-xs: .78rem;

  /* — Layout — */
  --au-container: 1200px; --au-header-h: 68px;

  /* — Meteogram luôn nền tối (đọc rõ ở cả 2 theme) — */
  --au-meteo-bg: #0c1626;
}

/* ============================================================
   DARK (mặc định) — Aurora tối
   ============================================================ */
:root, :root[data-theme="dark"] {
  --au-bg:        #070b18;
  --au-bg-2:      #0b1225;
  --au-surface:   #0f1830;

  --au-text:      #eef2ff;
  --au-text-soft: #c3cbe6;
  --au-text-dim:  #8b95b8;
  --au-text-faint:#5b6488;

  --au-ok: #34d399; --au-warn: #fbbf24; --au-danger: #f87171; --au-info: #38bdf8;

  --au-glass-bg:    rgba(255, 255, 255, .055);
  --au-glass-bg-2:  rgba(255, 255, 255, .085);
  --au-glass-brd:   rgba(255, 255, 255, .12);
  --au-glass-brd-2: rgba(255, 255, 255, .22);
  --au-glass-blur:  18px;
  --au-tile-bg:     rgba(255, 255, 255, .05);

  --au-shadow:    0 12px 40px -12px rgba(3, 7, 20, .7);
  --au-shadow-sm: 0 6px 20px -8px rgba(3, 7, 20, .6);
  --au-glow:      0 0 40px -6px rgba(99, 102, 241, .45);
  --au-glow-teal: 0 0 32px -6px rgba(45, 212, 191, .5);

  --au-header-bg:   rgba(10, 14, 28, .62);
  --au-panel-solid: rgba(12, 18, 36, .97);
  --au-dot:         rgba(255, 255, 255, .035);
  --au-shine:       rgba(255, 255, 255, .12);
  --au-map-tiles:   dark;
}

/* ============================================================
   LIGHT — bầu trời ban ngày trong trẻo
   ============================================================ */
:root[data-theme="light"] {
  --au-bg:        #e6f2ff;
  --au-bg-2:      #d5e8fb;
  --au-surface:   #ffffff;

  --au-text:      #0c1e33;
  --au-text-soft: #244a7c;
  --au-text-dim:  #415d89;
  --au-text-faint:#6f88b2;

  --au-ok: #10b981; --au-warn: #f59e0b; --au-danger: #ef4444; --au-info: #0ea5e9;

  --au-glass-bg:    rgba(233, 246, 255, .62);
  --au-glass-bg-2:  rgba(255, 255, 255, .88);
  --au-glass-brd:   rgba(30, 96, 180, .14);
  --au-glass-brd-2: rgba(30, 96, 180, .26);
  --au-glass-blur:  16px;
  --au-tile-bg:     rgba(240, 248, 255, .72);

  --au-shadow:    0 16px 42px -16px rgba(24, 74, 150, .30);
  --au-shadow-sm: 0 6px 18px -10px rgba(24, 74, 150, .26);
  --au-glow:      0 8px 28px -8px rgba(91, 99, 255, .40);
  --au-glow-teal: 0 8px 24px -8px rgba(18, 220, 192, .45);

  --au-header-bg:   rgba(240, 248, 255, .76);
  --au-panel-solid: rgba(255, 255, 255, .98);
  --au-dot:         rgba(40, 96, 180, .06);
  --au-shine:       rgba(255, 255, 255, .6);
  --au-map-tiles:   light;
}