/* ==========================================================================
   La Bàn Phong Thủy — Design System Stylesheet
   Matches docs/design_ui/DESIGN.md Tokens & Guidelines
   ========================================================================== */

:root {
  /* Surface & Background */
  --color-bg: #F7F5F0;
  --color-surface: #FFFFFF;
  --color-fill: #F1EDE3;
  --color-separator: #EBE6DB;
  --color-separator-subtle: #F1EFEA;

  /* Typography / Inks */
  --color-ink: #1C1917;
  --color-ink-secondary: #6B6357;
  --color-ink-tertiary: #8A8172;
  --color-ink-faint: #A79D8A;

  /* Primary (Cát / Auspicious / Brand) */
  --color-primary: #1E6B4E;
  --color-primary-dark: #1E4D3B;
  --color-primary-tint: #E7F2EC;
  --color-primary-header-accent: #D8C87E;

  /* Danger (Hung / Inauspicious) */
  --color-danger: #B3372E;
  --color-danger-tint: #F9E8E6;
  --color-danger-border: #C4756D;

  /* Gold / Level / Destiny Accent */
  --color-gold: #C9A227;
  --color-gold-text: #A8842C;
  --color-gold-deep: #7A5F1C;
  --color-gold-tint: #F5EDD8;
  --color-gold-border: #E4D6AE;

  /* Shadows */
  --shadow-card: 0 6px 24px rgba(28, 25, 23, 0.05);
  --shadow-cta: 0 10px 24px -4px rgba(30, 107, 78, 0.35);
  --shadow-phone: 0 20px 50px -12px rgba(28, 25, 23, 0.18);
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Google Sans', 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-ink);
}

/* Number display alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Custom Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--color-fill);
}

::-webkit-scrollbar-thumb {
  background: #C9C0AE;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Interactive transitions */
a, button {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Focus styles for keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dial and screenshot card hover effect */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(28, 25, 23, 0.08);
}

/* Glassmorphism helpers */
.glass-header {
  background-color: rgba(247, 245, 240, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}