/* =========================
   GLOBAL CSS VARIABLES
   ========================= */

:root {

  /* =====================
     COLORS (RED + BLACK THEME)
     ===================== */
  --color-primary: #DC3545;   /* Main Red */
  --color-secondary: #000000; /* Black */
  --color-accent: #FFFFFF;    /* White */

  --color-bg: #1A1A1A;        /* Dark Background */
  --color-surface: #222222;   /* Cards / sections */

  --color-text: #FFFFFF;      /* Main text */
  --color-text-muted: #B3B3B3;

  --color-border: #2E2E2E;

  /* STATES */
  --color-hover: #bb2d3b;
  --color-active: #a52834;


  /* =====================
     TYPOGRAPHY
     ===================== */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-normal: 1.5;


  /* =====================
     SPACING
     ===================== */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;


  /* =====================
     BORDER RADIUS
     ===================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;


  /* =====================
     SHADOWS (DARK UI FRIENDLY)
     ===================== */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 15px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.6);


  /* =====================
     TRANSITIONS
     ===================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;


  /* =====================
     CONTAINER
     ===================== */
  --container-xl: 1200px;
}

body {
  background: #fff;
  /* color: var(--color-text); */
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-hover);
}