/* ===== CSS VARIABLES & ROOT STYLES ===== */
:root {
  --primary-navy: #241443;
  --primary-navy-light: #3d2a5c;
  --primary-navy-dark: #150b2b;

  --metallic-silver: #0c0f17;
  --metallic-silver-light: #282829;
  --metallic-silver-dark: #0d0d0d;

  /* Metallic sheen gradients (use for buttons, cards, badges) */
  --gradient-navy-metallic: linear-gradient(135deg, #241443 0%, #3d2a5c 45%, #241443 100%);
  --gradient-silver-sheen: linear-gradient(135deg, #e8eaef 0%, #c9ccd4 50%, #9297a3 100%);
  --gradient-navy-silver: linear-gradient(135deg, #241443 0%, #4a4e5c 100%);
  --gradient-highlight: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );

  /* Text on metallic surfaces */
  --text-on-navy: #f4f4f6;
  --text-on-silver: #241443;

  /* Borders / dividers */
  --border-metallic: #d4d6dc;
  --shadow-metallic: 0 4px 14px rgba(36, 20, 67, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Additional colors */
  --primary-purple: #241443;
  --primary-purple-light: #3d2a5c;
  --primary-lime: #241443;
  --primary-forest: #150b2b;

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 15px rgba(36, 20, 67, 0.3);
  --shadow-hover: 0 12px 30px rgba(139, 127, 245, 0.3);
  --shadow-primary: 0 10px 30px rgba(102, 126, 234, 0.3);

  /* Text colors */
  --text-primary: #333;
  --text-secondary: #666;

  /* Backgrounds */
  --background-gradient: linear-gradient(135deg, #8b7ff5 0%, #241443 100%);
  --border-color: #ddd;
}

/* Global body styling */
body {
  background: #fafbfc;
  background-attachment: fixed;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}