/* ==========================================================================
   CYANAQ Systems — design tokens
   Palette is taken from the CYANAQ logo. Change values here to re-theme.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours */
  --c-black: #03040b;
  --c-navy: #070b1d;
  --c-navy-2: #0b1126;
  --c-blue: #164dff;
  --c-cyan: #00e5ff;
  --c-violet: #641bff;
  --c-magenta: #e33dff;
  --c-white: #ffffff;
  --c-muted: #a5abc0;
  --c-muted-2: #7c839c;

  /* Surfaces & lines */
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Gradients */
  --grad-brand: linear-gradient(110deg, var(--c-cyan) 0%, var(--c-blue) 38%, var(--c-violet) 72%, var(--c-magenta) 100%);
  /* palindromic, so the animated pan loops seamlessly and shows the full palette at any width */
  --grad-text: linear-gradient(100deg, var(--c-cyan) 0%, var(--c-blue) 25%, var(--c-violet) 50%, var(--c-blue) 75%, var(--c-cyan) 100%);
  --grad-cool: linear-gradient(120deg, var(--c-cyan), var(--c-blue));
  --grad-warm: linear-gradient(120deg, var(--c-violet), var(--c-magenta));
  --grad-border: linear-gradient(135deg, rgba(0, 229, 255, 0.55), rgba(22, 77, 255, 0.25) 35%, rgba(100, 27, 255, 0.25) 65%, rgba(227, 61, 255, 0.55));

  /* Typography */
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.35rem, 1.1rem + 4.6vw, 4.5rem);
  --fs-page-h1: clamp(2.1rem, 1.2rem + 3.8vw, 4.25rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --header-h: 76px;

  /* Radii, shadows, motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 0 1px rgba(0, 229, 255, 0.12), 0 18px 60px -18px rgba(22, 77, 255, 0.55);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t-med: 0.4s;
  --t-slow: 0.8s;

  color-scheme: dark;
}