@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Font Families */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Color Palette - Light Mode Default */
  --color-primary-hsl: 218, 55%, 16%;
  --color-secondary-hsl: 198, 85%, 43%;
  --color-accent-hsl: 36, 85%, 48%; /* Premium Gold representing heritage since 1947 */
  
  --color-primary: hsl(var(--color-primary-hsl));
  --color-primary-light: hsl(218, 55%, 26%);
  --color-secondary: hsl(var(--color-secondary-hsl));
  --color-secondary-light: hsl(198, 85%, 55%);
  --color-accent: hsl(var(--color-accent-hsl));
  --color-accent-hover: hsl(36, 85%, 40%);

  --color-text-main: hsl(218, 30%, 15%);
  --color-text-muted: hsl(218, 15%, 45%);
  --color-bg-main: hsl(210, 40%, 98%);
  --color-bg-card: hsla(210, 40%, 98%, 0.7);
  --color-bg-glass: rgba(255, 255, 255, 0.75);
  
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-focus: var(--color-secondary);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.08);

  --glass-blur: 12px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --max-width: 1280px;
  --navbar-height: 120px;
}

[data-theme="dark"] {
  /* Color Palette - Dark Mode */
  --color-primary-hsl: 218, 55%, 85%;
  --color-secondary-hsl: 198, 85%, 55%;
  
  --color-primary: hsl(218, 45%, 90%);
  --color-primary-light: hsl(218, 45%, 80%);
  --color-secondary: hsl(var(--color-secondary-hsl));
  --color-secondary-light: hsl(198, 85%, 65%);
  
  --color-text-main: hsl(218, 20%, 90%);
  --color-text-muted: hsl(218, 10%, 70%);
  --color-bg-main: hsl(218, 40%, 8%);
  --color-bg-card: hsla(218, 40%, 12%, 0.6);
  --color-bg-glass: rgba(13, 20, 33, 0.75);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-focus: var(--color-secondary);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 80px;
  }
}