/**
 * ARTIC — Farhad F1 theme overlay (Williams navy, F1 red, cyan, Orbitron/Inter).
 * Loaded after ups-theme.css and ux10-polish.css — overrides tokens only.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@500;700;900&display=swap");

:root {
  --f1-navy: #041e42;
  --f1-navy-light: #0a2d5c;
  --f1-black: #050508;
  --f1-cyan: #00d4ff;
  --f1-red: #e10600;
  --f1-white: #f4f6fa;
  --f1-grey: #8b95a8;

  --ups-brown: var(--f1-navy);
  --ups-brown-mid: var(--f1-navy-light);
  --ups-brown-dark: var(--f1-black);
  --ups-gold: var(--f1-cyan);
  --ups-gold-bright: #33ddff;
  --ups-cream: var(--f1-white);
  --ups-text-on-brown: var(--f1-white);
  --ups-text-on-gold: var(--f1-black);
  --ups-text-on-gold-strong: var(--f1-black);
  --ups-border: rgba(0, 212, 255, 0.35);
  --ups-border-soft: rgba(0, 212, 255, 0.18);
  --ups-marketing-bg-bottom: var(--f1-black);
  --ups-link: var(--f1-cyan);
  --ups-link-hover: var(--f1-white);

  --artic-navy: var(--f1-navy);
  --artic-navy-dark: var(--f1-black);
  --artic-blue: var(--f1-cyan);
  --artic-red: var(--f1-red);
  --artic-red-dark: #a80400;
  --artic-charcoal: var(--f1-navy-light);
  --artic-charcoal-dark: var(--f1-navy);
  --artic-charcoal-darker: var(--f1-black);
  --artic-border-subtle: rgba(0, 212, 255, 0.22);

  --dh-font: "Inter", system-ui, sans-serif;
  --dh-font-display: "Orbitron", system-ui, sans-serif;
  --dh-accent: var(--f1-red);
  --dh-accent-soft: rgba(225, 6, 0, 0.12);
  --dh-army-red: var(--f1-red);
  --dh-army-olive: var(--f1-navy-light);
  --dh-army-olive-dark: var(--f1-navy);
  --dh-army-gold: var(--f1-cyan);
  --dh-army-teal: #006680;
  --dh-focus-ring: rgba(0, 212, 255, 0.35);
  --dh-bg: #eceef2;
  --dh-surface: #ffffff;
}

body {
  background-image:
    linear-gradient(180deg, rgba(4, 30, 66, 0.06) 0%, var(--dh-bg) 14rem),
    repeating-conic-gradient(rgba(4, 30, 66, 0.04) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px;
}

.site-header {
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--f1-red);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.site-header .brand h1,
.dh-hero-title,
.shift-gate-card h2,
.panel > h2 {
  font-family: var(--dh-font-display);
  letter-spacing: 0.04em;
}

.tab-btn.is-active {
  background: var(--f1-red);
  border-color: var(--f1-red);
  color: var(--f1-white);
  box-shadow: inset 0 -2px 0 var(--f1-cyan);
}

.btn-primary {
  background: var(--f1-red);
  border-color: var(--f1-red);
  color: var(--f1-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #c00500;
  border-color: #c00500;
}

a {
  color: #006680;
}

a:hover {
  color: var(--f1-navy);
}

.shift-gate-overlay .shift-gate-card,
.launch-gate-card {
  border-top: 3px solid var(--f1-red);
}

.site-footer::after,
body.artic-marketing-page::after {
  content: "";
  display: block;
  height: 6px;
  background:
    linear-gradient(135deg, var(--f1-red) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(225deg, var(--f1-white) 25%, transparent 25%) 0 0 / 12px 12px,
    var(--f1-black);
}

.compliance-strip.status-green {
  border-left-color: var(--f1-cyan);
}

.current-activity-badge {
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--f1-cyan);
  color: var(--f1-white);
}

.tacho-symbol-bar {
  background: var(--f1-navy);
  border-bottom-color: var(--f1-red);
}