/* ==========================================================================
   Alatus — Visual Identity Tokens
   Source: Design System "Alatus" (Aerospace Precision direction)
   claude.ai/design/p/733f9416-6718-460c-8bd1-0283a8ba1246

   This is the identity layer only — colors, type, spacing, effects and the
   brand fonts. It carries no page or component layout. Include it once, high
   in the cascade, and reference the custom properties from your own styles:

       <link rel="stylesheet" href="brand/identity.css">

   Palette is anchored to the real brand logo blues (alatus-mark.svg):
   #00003F / #02005E / #0547CC / #1679EF. Note #1679EF (--blue-500) fails
   WCAG AA for normal body text on white (4.19:1) — use it for large text,
   icons, borders and accents only, not small labels.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Rodada 2: família única Inter Variable (aproximando Suisse Intl). Pesos
   arbitrários (430/525) exigem o arquivo variable. */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/index.css');

:root {
  --font-display: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Inter Variable', 'Inter', ui-monospace, 'SF Mono', monospace;

  /* --- Color: raw ramps ------------------------------------------------ */
  --blue-900: #02194d;
  --blue-800: #02268a;
  --blue-700: #0338ad;
  --blue-600: #0547cc;
  --blue-500: #1679ef;
  --blue-400: #4f9bff;
  --blue-300: #8fc0ff;
  --blue-100: #e4f0ff;
  --navy-900: #00003f;
  --navy-800: #02005e;
  --ink-900: #0e131f;
  --ink-700: #1a2130;
  --ink-500: #3d4457;
  --grey-600: #5c6474;
  --grey-400: #9aa1b0;
  --grey-200: #dde1e8;
  --grey-100: #eef1f5;
  --white: #ffffff;
  --green-600: #1c9a5b;
  --amber-600: #b8760a;
  --red-600: #c23b3b;

  /* --- Color: semantic roles ------------------------------------------ */
  --surface-page: #f9f7f3;
  --surface-sunken: var(--grey-100);
  --surface-console: var(--ink-900);
  --surface-console-raised: var(--ink-700);
  --surface-card: var(--white);
  --border-subtle: var(--grey-200);
  --border-console: rgba(255, 255, 255, 0.12);
  --text-primary: var(--navy-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--grey-600);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.64);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);
  --accent-primary: var(--blue-600);
  --accent-primary-hover: var(--blue-700);
  --accent-primary-active: var(--blue-800);
  --accent-secondary: var(--blue-500);
  --accent-tint: var(--blue-100);
  --focus-ring: var(--blue-500);
  --status-positive: var(--green-600);
  --status-warning: var(--amber-600);
  --status-negative: var(--red-600);

  /* --- Typography roles (font shorthand) ------------------------------ */
  /* Rodada 2 — escala de pesos Inter Variable: display 430, corpo 400,
     botões/labels 500–550. Hero aplica letter-spacing -0.058em / line-height
     0.91 diretamente (ver rebrand.css). */
  --text-display-xl: 430 clamp(2.5rem, 4vw, 4.25rem)/1.05 var(--font-display);
  --text-display-lg: 430 clamp(2rem, 3vw, 3rem)/1.1 var(--font-display);
  --text-display-md: 430 1.75rem/1.15 var(--font-display);
  --text-display-sm: 500 1.375rem/1.25 var(--font-display);
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body-md: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.55 var(--font-body);
  --text-label: 525 0.8125rem/1.3 var(--font-body);
  --text-eyebrow: 500 0.75rem/1.2 var(--font-mono);
  --tracking-eyebrow: 0.14em;
  --text-mono-sm: 500 0.8125rem/1.4 var(--font-mono);
  --text-mono-md: 500 0.9375rem/1.4 var(--font-mono);

  /* --- Spacing (8px base) --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --container-max: 1200px;
  --container-pad: 24px;

  /* --- Radii / elevation / motion ------------------------------------- */
  /* Rodada 3 — Squircle moderado. border-radius é o fallback universal;
     corner-shape: squircle é aplicado progressivamente nos componentes. */
  --squircle-compact: 18px;
  --squircle-medium: 22px;
  --squircle-wide: 36px;
  --squircle-control: 999px;
  --orbital-blue: 22, 121, 239;
  --orbital-duration: 16s;
  --orbital-bleed: 8px;
  --orbital-light-alpha: 0.18;
  --orbital-dark-alpha: 0.24;
  --cursor-light-alpha: 0.12;
  --cursor-dark-alpha: 0.18;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(2, 5, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(2, 10, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(2, 10, 40, 0.14);
  --shadow-console: 0 24px 64px rgba(0, 0, 0, 0.45);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
}