:root {
  --color-navy: #0D1B2A;
  --color-gold: #D4AF37;
  --color-white: #FFFFFF;
  --color-black: #111111;
  --color-surface: #FFFFFF;
  --color-muted: #5C6B7A;
  --color-border: #D5DCE5;
  --color-navy-soft: #152536;
  --color-danger: #9B2C3E;
  --color-success: #2F5D45;
  --color-page: #FFFFFF;
  --color-card: #FFFFFF;
  --color-text: #111111;
  --color-header-fg: #FFFFFF;
  --font-latin: "Inter", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", sans-serif;
  --shadow-card: 0 12px 32px rgba(13, 27, 42, 0.07);
  --shadow-card-hover: 0 20px 44px rgba(13, 27, 42, 0.14);
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

[data-theme="dark"] {
  --color-navy: #0D1B2A;
  --color-gold: #D4AF37;
  --color-white: #FFFFFF;
  --color-black: #111111;
  --color-surface: #0A121C;
  --color-muted: #9AA8B5;
  --color-border: #2A3A4C;
  --color-navy-soft: #1A2B3D;
  --color-danger: #C45A6A;
  --color-success: #4A9B6E;
  --color-page: #070D14;
  --color-card: #101B28;
  --color-text: #F2F5F8;
  --color-header-fg: #FFFFFF;
  --font-latin: "Inter", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", sans-serif;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.45);
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-navy: #0D1B2A;
    --color-gold: #D4AF37;
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-surface: #0A121C;
    --color-muted: #9AA8B5;
    --color-border: #2A3A4C;
    --color-navy-soft: #1A2B3D;
    --color-danger: #C45A6A;
    --color-success: #4A9B6E;
    --color-page: #070D14;
    --color-card: #101B28;
    --color-text: #F2F5F8;
    --color-header-fg: #FFFFFF;
    --font-latin: "Inter", system-ui, sans-serif;
    --font-arabic: "IBM Plex Sans Arabic", "Inter", sans-serif;
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.45);
    --radius-sm: 14px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;
  }
}