/* ==========================================================================
   SpinaFX Design System - CSS Variables
   Reusable across all SpinaFX pages
   ========================================================================== */

/* ===== FONT FACE ===== */
@font-face {
  font-family: 'mundial';
  src: url('../../fonts/MundialRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'mundial';
  src: url('../../fonts/MundialDemibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'mundial';
  src: url('../../fonts/MundialBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'mundial';
  src: url('../../fonts/MundialLightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primary Colors */
  --spinafx-primary-950: #07182b;
  --spinafx-primary-900: #061f30;
  --spinafx-primary-600: #006eb6;
  --spinafx-primary-500: #1988de;
  --spinafx-primary-300: #84c3f5;
  --spinafx-primary-200: #bdddfa;
  --spinafx-primary-50: #f1f7fe;

  /* Secondary Colors */
  --spinafx-secondary-500: #1ec4b8;

  /* Accent */
  --spinafx-accent-divider: #2292bd;

  /* Neutral / Gray */
  --spinafx-gray-600: #555555;
  --spinafx-gray-500: #777777;
  --spinafx-gray-50: #fafaff;
  --spinafx-white: #ffffff;

  /* Typography */
  --spinafx-font-heading: 'mundial', sans-serif;
  --spinafx-font-body: 'mundial', sans-serif;

  /* Font Sizes */
  --spinafx-text-xs: 0.8125rem;  /* 13px */
  --spinafx-text-sm: 0.875rem;   /* 14px */
  --spinafx-text-base: 1rem;     /* 16px */
  --spinafx-text-lg: 1.25rem;    /* 20px */
  --spinafx-text-xl: 1.375rem;   /* 22px */
  --spinafx-text-2xl: 1.5rem;    /* 24px */
  --spinafx-text-3xl: 1.75rem;   /* 28px */
  --spinafx-text-4xl: 2rem;      /* 32px */
  --spinafx-text-5xl: 2.5rem;    /* 40px */
  --spinafx-text-6xl: 3.25rem;   /* 52px */

  /* Spacing Scale */
  --spinafx-space-1: 0.25rem;    /* 4px */
  --spinafx-space-2: 0.5rem;     /* 8px */
  --spinafx-space-3: 0.75rem;    /* 12px */
  --spinafx-space-4: 1rem;       /* 16px */
  --spinafx-space-5: 1.25rem;    /* 20px */
  --spinafx-space-6: 1.5rem;     /* 24px */
  --spinafx-space-7: 1.75rem;     /* 28px */
  --spinafx-space-8: 2rem;       /* 32px */
  --spinafx-space-10: 2.5rem;    /* 40px */
  --spinafx-space-12: 3rem;      /* 48px */
  --spinafx-space-16: 4rem;      /* 64px */
  --spinafx-space-25: 6.25rem;   /* 100px */

  /* Layout */
  --spinafx-container-max: 1120px;          /* 1120px */
  --spinafx-container-padding-mobile: 1rem; /* 16px */

  /* Border Radius */
  --spinafx-radius-sm: 0.25rem;  /* 4px */
  --spinafx-radius-md: 0.5rem;   /* 8px */
  --spinafx-radius-lg: 0.75rem;  /* 12px */

  /* Transitions */
  --spinafx-transition-fast: 0.2s;
  --spinafx-transition-base: 0.3s;

  /* Overlay */
  --spinafx-overlay-dark: rgba(7, 24, 43, 0.8);
  --spinafx-overlay-darker: rgba(7, 24, 43, 0.95);
  --spinafx-gradient-dark: linear-gradient(to top, #07182b, rgba(7, 24, 43, 0.9) 60%, transparent);
}