/* Firmamento — Core (Spec-aligned tokens + base + a11y) */

:root{
  /* ===== Brand Core (Spec) ===== */
  --c-navy: #031335;
  --c-azure: #94B1FF;
  --c-gold: #F0CB7A;
  --c-white: #FFFFFF;

  /* ===== Extended palette (Spec) ===== */
  --c-navy-light: #0A1F47;
  --c-navy-lighter: #0A2854;

  --c-azure-bright: #5F7FFF; /* AA on navy */
  --c-azure-light: #B8D1FF;
  --c-azure-pale: #E8EDFF;

  --c-gold-bright: #F5D85C;
  --c-gold-muted: #D4B06F;

  --c-gray-50: #F8F9FB;
  --c-gray-100: #E8EBEF;
  --c-gray-dark: #4A4A4A;
  --c-gray-700: #2D3748;
  --c-gray-900: #1A202C;

  --c-border-light: #D1D5DB;
  --c-border-subtle: #E8EBEF;

  --c-success: #10B981;
  --c-warning: #F59E0B;
  --c-error: #EF4444;
  --c-info: #3B82F6;
  --c-blue-professional: #1E40AF; /* AAA on white */

  /* ===== Semantic (light) ===== */
  --bg-page: var(--c-white);
  --text: var(--c-navy);
  --text-secondary: var(--c-gray-dark);
  --line: var(--c-border-light);
  --line-subtle: var(--c-border-subtle);
  --shadow: 0 18px 60px rgba(0,0,0,.12);

  /* ===== Semantic (dark) ===== */
  --bg-dark: var(--c-navy);
  --bg-dark-elev: var(--c-navy-light);
  --line-dark: var(--c-navy-lighter);
  --text-dark: var(--c-white);
  --muted-dark: var(--c-gray-100);
  --shadow-dark: 0 20px 70px rgba(0,0,0,.40);

  /* ===== Typography (Spec) ===== */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --fs-body: 16px;
  --lh-body: 1.6;

  /* H1: 48 desktop, down to ~32 on mobile */
  --fs-h1: clamp(32px, 4.2vw, 48px);
  --fs-h2: clamp(24px, 3vw, 36px);
  --fs-h3: clamp(18px, 2vw, 22px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===== Spacing (Spec 8px base) ===== */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;
  --s-5xl: 128px;

  /* ===== Radius / motion ===== */
  --r-10: 10px;
  --r-14: 14px;
  --r-18: 18px;
  --r-24: 24px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --speed-1: 140ms;
  --speed-2: 220ms;
  --speed-3: 360ms;

  /* ===== Layout (Spec) ===== */
  --container-max: 1024px;
  --gutter: 16px;

  /* ===== Header ===== */
  --header-h: 84px;
  --header-h-compact: 68px;

  /* ===== Focus ===== */
  --focus-ring: 0 0 0 4px rgba(95,127,255,.30);
}

@media (min-width: 768px){
  :root{ --gutter: 24px; }
}
@media (min-width: 1024px){
  :root{ --container-max: 1024px; --gutter: 32px; }
}
@media (min-width: 1280px){
  :root{ --container-max: 1280px; }
}
@media (min-width: 1536px){
  :root{ --container-max: 1440px; }
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ color-scheme: light dark; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg-page);
  color: var(--text);
  overflow-x:hidden;
}

img, svg, video{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }
::selection{ background: rgba(95,127,255,.24); }

.container{
  width: min(var(--container-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

/* A11y */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  border:0;
}
.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  padding: 12px 14px;
  border-radius: var(--r-14);
  background: var(--c-navy);
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,.18);
  z-index: 9999;
}
.skip-link:focus{ left: 12px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--c-azure-bright);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-14);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Typography */
h1, h2, h3{
  letter-spacing: -0.5px; /* Spec: tighter in light/B2B */
  line-height: 1.2;
  margin: 0 0 var(--s-md);
}
h1{ font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
h2{ font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3{ font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: -0.2px; }

p{ margin: 0 0 var(--s-md); color: var(--text-secondary); }

/* Sections */
.section{
  position: relative;
  padding: var(--s-4xl) 0; /* Spec: often 96px */
}
.section--tight{ padding: var(--s-3xl) 0; }

.section--light{ background: var(--c-white); color: var(--text); }
.section--dark{
  background: var(--bg-dark);
  color: var(--text-dark);
}
.section--dark p{ color: var(--muted-dark); }

/* Main offset under fixed header */
.main-offset{ padding-top: var(--header-h); }

/* Reveal on scroll */
.fade-in-on-scroll{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--speed-3) var(--ease), transform var(--speed-3) var(--ease);
}
.fade-in-on-scroll.animate-in{
  opacity: 1;
  transform: translateY(0);
}

/* Utility */
.stack{ display:grid; gap: var(--s-md); }
.hr{ height:1px; background: var(--line); border:0; }
.hr--dark{ background: var(--line-dark); }