:root {
  /* -------------------------------------------------------
       BRAND COLORS
    --------------------------------------------------------*/
  --color-primary: #ffc413;
  --color-primary-hover: #f4b10b;
  --color-secondary: #000000;
  --color-secondary-light: #14253E;
  --color-secondary-dark: #08111D;
  --color-teritary: #cb2027;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F9FC;
  --color-bg-dark: #0D1B2A;
  --color-text: #1A1A1A;
  --color-text-light: #4B4B4B;
  --color-text-dark: #0B1320;
  --color-text-muted: #8A97A8;
  --color-border: #E2E8F0;
  --color-border-dark: #1F2A40;
  --color-success: #4CAF50;
  --color-danger: #E74C3C;
  --color-warning: #FFC107;
  --color-info: #3498DB;
  /* -------------------------------------------------------
       TYPOGRAPHY
    --------------------------------------------------------*/
  --font-primary: "Inter", "Segoe UI", sans-serif;
  --font-heading: "Poppins", "Inter", sans-serif;
  --text-xxl: 4.8rem; /* Hero Heading */
  --text-xl: 2.25rem;
  --text-lg: 1.5rem;
  --text-md: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.9rem;
  --text-xs: 0.8rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* -------------------------------------------------------
       SPACING SCALE
    --------------------------------------------------------*/
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 68px;
  /* -------------------------------------------------------
       CONTAINER & LAYOUT
    --------------------------------------------------------*/
  --container-width: 1200px;
  --container-padding: 16px;
  --section-padding: 80px;
  --section-padding-lg: 120px;
  --navbar-height: 74px;
  /* -------------------------------------------------------
       BORDERS & RADII
    --------------------------------------------------------*/
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 50px;
  --radius-round: 50%;
  /* -------------------------------------------------------
       SHADOWS
    --------------------------------------------------------*/
  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0px 8px 20px rgba(0, 0, 0, 0.12);
  --shadow-card: 0px 10px 30px rgba(0, 0, 0, 0.10);
  /* -------------------------------------------------------
       BUTTON TOKENS
    --------------------------------------------------------*/
  --btn-font-size: var(--text-base);
  --btn-font-weight: 600;
  --btn-padding: 8px 28px;
  --btn-radius: 6px;
  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: var(--color-text-dark);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-outline-color: #ffffff;
  --btn-outline-border: var(--color-primary);
  /* -------------------------------------------------------
       CARD TOKENS
    --------------------------------------------------------*/
  --card-bg: #FFFFFF;
  --card-radius: 14px;
  --card-padding: 24px;
  --card-shadow: var(--shadow-md);
  /* -------------------------------------------------------
       HERO SECTION TOKENS
    --------------------------------------------------------*/
  --hero-overlay-color: rgba(9, 18, 32, 0.55);
  --hero-text-color: #FFFFFF;
  --hero-button-gap: 12px;
  /* -------------------------------------------------------
       FOOTER TOKENS
    --------------------------------------------------------*/
  --footer-bg: #000000;
  --footer-text: #D3DBE7;
  --footer-link: #e3e3e3;
  --footer-link-hover: #ffffff;
  --footer-border: rgba(255, 255, 255, 0.08);
  /* -------------------------------------------------------
       TRANSITIONS
    --------------------------------------------------------*/
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}