:root {
  /* Quảng Ninh inspired palette - Biển xanh + Hồng tím */
  --p1: #1a4d7a; /* Xanh biển Hạ Long đậm */
  --p2: #2563a0; /* Xanh biển chính */
  --p3: #d0317b; /* Hồng tím chuyển tiếp */
  --p4: #f0518a; /* Hồng accent */
  --p5: #ff8ab4; /* Hồng nhạt */

  /* Ocean inspired gradients */
  --ocean-primary: #1a4d7a;
  --ocean-accent:  #2563a0;
  --pink-primary:  #d0317b;
  --pink-accent:   #f0518a;

  /* Legacy aliases (used by admin/component pages) */
  --primary:      #2563a0;
  --primary-dark: #1a4d7a;
  --accent:       #f0518a;

  /* Surface - Sáng, tươi mới như bầu trời Quảng Ninh */
  --bg:         #f8fbff;
  --bg-card:    #ffffff;
  --text:       #0f1419;
  --text-mid:   #3d5060;
  --text-muted: #6b7f93;
  --border:     #e0e7ef;

  /* Semantic */
  --danger:  #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --info:    #3b82f6;

  /* Gradients - Biển xanh sang hồng tím (bình minh/hoàng hôn Hạ Long) */
  --grad-hero: linear-gradient(140deg, #1a4d7a 0%, #2563a0 35%, #d0317b 70%, #f0518a 100%);
  --grad-card: linear-gradient(135deg, #f0f7ff 0%, #fff0f7 100%);
  --grad-btn:  linear-gradient(135deg, #2563a0 0%, #1a4d7a 100%);
  --grad-accent: linear-gradient(135deg, #d0317b 0%, #f0518a 100%);

  /* Shape */
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 2px 8px rgba(124,31,162,.10);
  --shadow-sm: 0 2px 8px rgba(124,31,162,.10);
  --shadow-lg: 0 12px 48px rgba(124,31,162,.18);

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font:         'Inter', 'Segoe UI', system-ui, sans-serif;
  --container:    1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0a1520;
    --bg-card:    #132338;
    --text:       #e8f1ff;
    --text-mid:   #a3c1e0;
    --text-muted: #6b8aaf;
    --border:     #1e3a52;
    --grad-card:  linear-gradient(135deg, #132338 0%, #1a2d45 100%);
    --shadow:     0 2px 8px rgba(0,0,0,.5);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.5);
    --shadow-lg:  0 12px 48px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:         #0a1520;
  --bg-card:    #132338;
  --text:       #e8f1ff;
  --text-mid:   #a3c1e0;
  --text-muted: #6b8aaf;
  --border:     #1e3a52;
  --grad-card:  linear-gradient(135deg, #132338 0%, #1a2d45 100%);
  --shadow:     0 2px 8px rgba(0,0,0,.5);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.6);
}