/* =====================================================================
   DEFENCE STREET — design tokens
   Palette taken from the shield logo: deep navy, royal blue, steel,
   with a gold accent for highlights and calls to action.
   ===================================================================== */

:root {
  /* brand */
  --ds-navy-900: #050d1c;
  --ds-navy-800: #0a1930;
  --ds-navy-700: #102a4c;
  --ds-navy-600: #16386a;
  --ds-blue-700: #0b3fa8;
  --ds-blue-600: #0b57d0;
  --ds-blue-500: #1a6ff0;
  --ds-blue-400: #4f93ff;
  --ds-blue-100: #e3edff;
  --ds-blue-050: #f2f7ff;
  --ds-gold-600: #d99700;
  --ds-gold-500: #f5b301;
  --ds-gold-300: #ffd66b;
  --ds-steel-700: #4a5a70;
  --ds-steel-500: #7b8ba3;
  --ds-steel-300: #c3cddb;
  --ds-steel-100: #eef2f7;

  /* semantic */
  --ds-primary: var(--ds-blue-600);
  --ds-primary-dark: var(--ds-blue-700);
  --ds-accent: var(--ds-gold-500);
  --ds-dark: var(--ds-navy-800);
  --ds-body: #1f2a3a;
  --ds-text: #1f2a3a;
  --ds-muted: #64748b;
  --ds-border: #e2e8f0;
  --ds-bg: #ffffff;
  --ds-bg-soft: #f6f8fb;
  --ds-success: #15803d;
  --ds-warning: #b45309;
  --ds-danger: #dc2626;
  --ds-info: #0369a1;

  /* effects */
  --ds-radius-sm: 8px;
  --ds-radius: 14px;
  --ds-radius-lg: 22px;
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --ds-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --ds-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --ds-shadow-lg: 0 24px 60px rgba(10, 25, 48, .16);
  --ds-shadow-glow: 0 0 0 4px rgba(11, 87, 208, .12);
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
  --ds-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* gradients */
  --ds-grad-hero: linear-gradient(120deg, #050d1c 0%, #0a1930 38%, #102a4c 70%, #0b3fa8 130%);
  --ds-grad-blue: linear-gradient(135deg, var(--ds-blue-600), var(--ds-blue-400));
  --ds-grad-gold: linear-gradient(135deg, var(--ds-gold-600), var(--ds-gold-300));
  --ds-grad-steel: linear-gradient(135deg, #94a3b8, #e2e8f0 45%, #64748b);
  --ds-grad-purple: linear-gradient(135deg, #4c1d95, #7c3aed 60%, #a855f7);
  --ds-grad-green: linear-gradient(135deg, #14532d, #16a34a);

  /* typography */
  --ds-font-body: 'Inter', 'Twemoji Country Flags', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-font-display: 'Barlow Condensed', 'Inter', 'Twemoji Country Flags', system-ui, sans-serif;

  /* layout */
  /* header is three stacked bars; --ds-header-h is the STICKY height
     (main + nav) because the top strip rolls away on scroll. */
  --hdr-top-h: 36px;
  --hdr-main-h: 74px;
  --hdr-nav-h: 46px;
  --ds-header-h: 120px;
  --ds-container: 1280px;
}

/* ---------------------------------------------------------------------
   Country flag emoji support.
   Windows ships no flag glyphs, so a small Twemoji subset is loaded
   ahead of the system emoji font. Everything else falls through to the
   platform font, keeping the download tiny.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
                 U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('../vendor/flags/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}
.flag, .flag-emoji {
  font-family: 'Twemoji Country Flags', var(--ds-font-body);
  font-size: 1.05em; line-height: 1; display: inline-block; vertical-align: -0.08em;
}

@media (max-width: 991px) {
  :root { --hdr-top-h: 0px; --ds-header-h: 124px; }
}