/* ==========================================================================
   DESIGN TOKENS — British IT Theme
   Central source of truth for all design values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face Declarations
   -------------------------------------------------------------------------- */

/* Poppins — Primary / Display Font */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

/* Open Sans — Body / Secondary Font */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   :root — Design Tokens
   -------------------------------------------------------------------------- */

:root {

  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --color-navy:        #1A1F5E;
  --color-crimson:     #C8102E;
  --color-white:       #FFFFFF;
  --color-blue-accent: #2563EB;

  /* ── Background Colors ────────────────────────────────────────────────── */
  --color-bg-light:    #F5F6FA;
  --color-bg-dark:     #0F1340;

  /* ── Text Colors ──────────────────────────────────────────────────────── */
  --color-text-dark:   #1E293B;
  --color-text-muted:  #64748B;
  --color-text-light:  #94A3B8;

  /* ── Border Colors ────────────────────────────────────────────────────── */
  --color-border:      #E2E8F0;
  --color-border-dark: #334155;

  /* ── Semantic / Feedback Colors ───────────────────────────────────────── */
  --color-success:     #16A34A;
  --color-warning:     #D97706;
  --color-error:       #DC2626;
  --color-info:        #0284C7;

  /* ── Overlay ──────────────────────────────────────────────────────────── */
  --color-overlay:     rgba(26, 31, 94, 0.85);


  /* ── Typography — Font Families ───────────────────────────────────────── */
  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ── Typography — Font Sizes (fluid with clamp) ───────────────────────── */
  --fs-xs:   clamp(0.75rem,  1vw,  0.875rem);
  --fs-sm:   clamp(0.875rem, 1.2vw, 1rem);
  --fs-base: clamp(1rem,     1.5vw, 1.125rem);
  --fs-md:   clamp(1.125rem, 1.8vw, 1.25rem);
  --fs-lg:   clamp(1.25rem,  2vw,   1.5rem);
  --fs-xl:   clamp(1.5rem,   2.5vw, 2rem);
  --fs-2xl:  clamp(2rem,     3.5vw, 2.75rem);
  --fs-3xl:  clamp(2.5rem,   5vw,   3.5rem);
  --fs-hero: clamp(2.75rem,  6vw,   4.5rem);

  /* ── Typography — Font Weights ────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Typography — Line Heights ────────────────────────────────────────── */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ── Typography — Letter Spacing ──────────────────────────────────────── */
  --ls-tight:  -0.02em;
  --ls-normal: 0em;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;


  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Section Spacing ──────────────────────────────────────────────────── */
  --section-py:    clamp(3rem, 6vw, 5rem);
  --section-px:    clamp(1rem, 5vw, 2rem);

  /* ── Container Widths ─────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-md:  960px;
  --container-sm:  720px;


  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  /* ── Box Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(26,31,94,0.10);
  --shadow-lg:  0 8px 32px rgba(26,31,94,0.15);
  --shadow-xl:  0 20px 60px rgba(26,31,94,0.20);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}