/* SKYLEAR — shared design tokens (site + universe explorer + brand board)
   Type: licensed Lay Grotesk (ICOMAT) / Suisse Int'l (AIRCO) drop in first if present;
   Geist + Geist Mono are the free fallbacks. Never Inter. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Saira:ital,wdth,wght@1,112.5,300;1,112.5,400;1,125,300&display=swap");

:root {
  /* colour — deep-space navy built from Hashgraph's atmosphere */
  --void: #03050a;          /* page base */
  --ink: #070b14;           /* raised surface */
  --deep: #0b1322;          /* panels */
  --stratos: #15233b;       /* hairline fills / hover */
  --line: rgba(190, 210, 240, 0.12);
  --line-strong: rgba(190, 210, 240, 0.24);
  --mist: #8b9bb4;          /* secondary text (7.2:1 on --void) */
  --haze: #b8c4d6;          /* tertiary emphasis */
  --paper: #eef1f5;         /* primary text */
  --ion: #9cc8ff;           /* cold glow accent */
  --ion-deep: #3d7bff;
  --ignition: #ff6a2b;      /* re-entry heat — used sparingly */
  --ok: #7be0b0;

  /* type */
  --f-sans: "Lay Grotesk", "Suisse Intl", "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Suisse Intl Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-wide: "FP Head Pro", "Saira", var(--f-sans); /* italic wide accent, echoes the wordmark */

  --t-xs: 0.6875rem;   /* 11 — mono micro labels */
  --t-sm: 0.8125rem;   /* 13 */
  --t-base: 1rem;      /* 16 */
  --t-md: 1.25rem;
  --t-lg: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --t-xl: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  --t-xxl: clamp(3rem, 1.2rem + 7vw, 8.75rem);

  /* space (8pt) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms; --d-med: 420ms; --d-slow: 900ms;

  /* layers */
  --z-canvas: 0; --z-content: 10; --z-hud: 40; --z-nav: 100; --z-modal: 1000;

  color-scheme: dark;
}