/* ============================================================
   NEXSAT TECHNOLOGIES — Design Tokens
   css/variables.css
   Paleta derivada da marca: navy profundo + ciano "sinal".
   Dark é o tema padrão; light redefine apenas os tokens de cor.
   ============================================================ */

:root {
  /* ---------- Marca (fixos nos dois temas) ---------- */
  --navy-950: #030814;
  --navy-900: #061024;
  --navy-800: #0A1A33;
  --navy-700: #10264A;
  --cyan-500: #00C2FF;
  --cyan-400: #3DD3FF;
  --cyan-600: #0098D4;
  --indigo-500: #5B7CFF;
  --mint-500: #2EE6A6;
  --amber-500: #FFB547;
  --rose-500: #FF6B8B;

  /* ---------- Tipografia ---------- */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-brand: 'Montserrat', 'Sora', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
  --fs-hero: clamp(2.7rem, 1.2rem + 5vw, 5.1rem);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-h: 76px;
  --section-y: clamp(5rem, 10vw, 8.5rem);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 700ms;

  --z-nav: 100;
  --z-overlay: 200;

  /* ---------- Cores semânticas — DARK (padrão) ---------- */
  color-scheme: dark;
  --bg: #040A18;
  --bg-elev: #071229;
  --bg-sunken: #030713;
  --surface: rgba(16, 34, 68, 0.42);
  --surface-strong: rgba(18, 38, 76, 0.72);
  --surface-solid: #0A1730;
  --line: rgba(140, 180, 255, 0.11);
  --line-strong: rgba(140, 180, 255, 0.22);

  --text: #EAF2FF;
  --text-2: #A7B6D2;
  --text-3: #6C7E9E;

  --brand: var(--cyan-500);
  --brand-ink: var(--cyan-400);      /* ciano usado como cor de TEXTO */
  --brand-2: var(--indigo-500);
  --on-brand: #021025;               /* texto sobre ciano: sempre escuro */
  --success: var(--mint-500);
  --warning: var(--amber-500);

  --glow: 0 0 0 1px rgba(0, 194, 255, 0.25), 0 10px 40px -10px rgba(0, 194, 255, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, 0.75);

  --grid-line: rgba(120, 170, 255, 0.06);
  --hero-glow-1: rgba(0, 194, 255, 0.20);
  --hero-glow-2: rgba(91, 124, 255, 0.18);

  /* canvas orbital (lidos via JS) */
  --orbit-land: #5FDcff;
  --orbit-sea: rgba(120, 170, 255, 0.16);
  --orbit-ring: rgba(120, 190, 255, 0.28);
  --orbit-sat: #EAF2FF;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F8FD;
  --bg-elev: #FFFFFF;
  --bg-sunken: #EAF0F9;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-solid: #FFFFFF;
  --line: rgba(10, 26, 51, 0.09);
  --line-strong: rgba(10, 26, 51, 0.17);

  --text: #0A1A33;
  --text-2: #3C4D69;
  --text-3: #536380; /* ≥ 4.5:1 sobre --bg-sunken (WCAG AA) */

  --brand: var(--cyan-500);
  --brand-ink: #0072B0;
  --brand-2: #3D5BE0;
  --on-brand: #021025;
  --success: #0C9F6E;
  --warning: #B87300;

  --glow: 0 0 0 1px rgba(0, 150, 210, 0.22), 0 10px 36px -12px rgba(0, 150, 210, 0.45);
  --shadow-sm: 0 1px 2px rgba(10, 26, 51, 0.06);
  --shadow-md: 0 14px 34px -16px rgba(10, 26, 51, 0.22);
  --shadow-lg: 0 34px 80px -30px rgba(10, 26, 51, 0.32);

  --grid-line: rgba(10, 26, 51, 0.05);
  --hero-glow-1: rgba(0, 194, 255, 0.18);
  --hero-glow-2: rgba(91, 124, 255, 0.14);

  --orbit-land: #0A86C8;
  --orbit-sea: rgba(10, 40, 90, 0.13);
  --orbit-ring: rgba(10, 80, 160, 0.22);
  --orbit-sat: #0A1A33;
}