/* Fuse One — design tokens */

/* Inter — body */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }

/* Space Grotesk — display */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }

:root {
  /* Surfaces — near-black aurora canvas */
  --bg: #05060B;
  --bg-soft: #080A12;
  --surface: #0E1320;
  --surface-2: #131A2A;
  --elevated: #1B2336;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(61, 139, 255, 0.35);

  /* Text */
  --text: #EAEDF5;
  --text-muted: #9AA3B7;
  --text-dim: #8A93A8;

  /* Accent — electric blue (primary / structural) */
  --accent: #3D8BFF;
  --accent-bright: #6FA8FF;
  --accent-deep: #1E63E6;
  --accent-ink: #04060B;
  --accent-soft: rgba(61, 139, 255, 0.12);
  --accent-softer: rgba(61, 139, 255, 0.06);
  --accent-glow: rgba(61, 139, 255, 0.45);

  /* Aurora teal — the bright pop / primary CTA (var names kept for cascade) */
  --ember: #1FE5C2;
  --ember-bright: #5BF0D6;
  --ember-soft: rgba(31, 229, 194, 0.14);
  --ember-glow: rgba(31, 229, 194, 0.42);
  --teal-ink: #042520;

  /* Semantic */
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --danger: #F77272;
  --danger-soft: rgba(247, 114, 114, 0.12);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #2EE6C6 0%, #3D8BFF 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(46, 230, 198, 0.16), rgba(61, 139, 255, 0.06));
  --grad-text: linear-gradient(115deg, #EAF2FF 0%, #8FE9D9 46%, #4DA3FF 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  --grad-hairline: linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  --fs-eyebrow: 0.8125rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --h1: clamp(2.6rem, 1.7rem + 3.8vw, 4.5rem);
  --h2: clamp(1.9rem, 1.45rem + 2vw, 2.9rem);
  --h3: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem);
  --h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);

  --lh-tight: 0.98;
  --lh-snug: 1.18;
  --lh: 1.6;
  --tracking-tight: -0.025em;
  --tracking-tighter: -0.04em;
  --tracking-wide: 0.16em;
  --measure: 62ch;

  /* Spacing */
  --gutter: clamp(1.25rem, 5vw, 2.25rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --container: 1180px;
  --container-narrow: 760px;

  /* Radius */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 20px 60px -22px var(--accent-glow);
  --ring: 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent);

  /* Motion */
  --dur: 0.45s;
  --dur-fast: 0.2s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --header-h: 70px;
  --z-header: 100;
  --z-menu: 200;

  color-scheme: dark;
}