/* =========================================================================
   Infinity Design System — colors_and_type.css
   Single source of truth for color + typography tokens.
   Dark-only theme. All values derive from the brand guidelines doc.
   ========================================================================= */

/* Self-hosted variable fonts (latin subset, from Google Fonts). */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/inter.woff2") format("woff2");
}

:root {
  /* ---------- Neutrals (backgrounds → borders) ---------- */
  --inf-deep-space: #030305; /* App background */
  --inf-void: #0a0a0f; /* Surfaces / cards */
  --inf-elevated: #14141e; /* Hover state surfaces */
  --inf-border-core: #1f1f2e; /* Dividers / strokes (solid) */

  /* ---------- Accents ---------- */
  --inf-electric-blue: #00d2ff;
  --inf-deep-nebula: #7a28cb;
  --inf-hyper-pink: #ff007f;
  --inf-core-indigo: #4b00e0;

  /* ---------- Text ---------- */
  --inf-fg-1: #ffffff; /* Primary */
  --inf-fg-2: rgba(255, 255, 255, 0.7); /* Secondary  (#A0A0B0) */
  --inf-fg-3: rgba(255, 255, 255, 0.4); /* Muted      (#606070) */
  --inf-fg-4: rgba(255, 255, 255, 0.2); /* Disabled / placeholder */

  /* ---------- Hairlines (use over dark surfaces) ---------- */
  --inf-hairline-soft: rgba(255, 255, 255, 0.05);
  --inf-hairline: rgba(255, 255, 255, 0.1);
  --inf-hairline-loud: rgba(255, 255, 255, 0.2);

  /* ---------- Signature gradients ---------- */
  --inf-gradient-brand: linear-gradient(135deg, #00d2ff 0%, #7a28cb 50%, #ff007f 100%);
  --inf-gradient-brand-hover: linear-gradient(135deg, #2ee0ff 0%, #9543e8 50%, #ff3399 100%);
  --inf-gradient-surface: linear-gradient(to bottom right, #030305, #14141e);
  --inf-gradient-protect-top: linear-gradient(to bottom, rgba(122, 40, 203, 0.2), transparent);
  --inf-gradient-protect-btm: linear-gradient(to top, #14141e, transparent);

  /* ---------- Glass panel ---------- */
  --inf-glass-bg: rgba(10, 10, 15, 0.6);
  --inf-glass-blur: blur(12px);
  --inf-glass-border: 1px solid var(--inf-hairline-soft);

  /* ---------- Neon glows ---------- */
  --inf-glow-blue: 0 0 20px rgba(0, 210, 255, 0.3);
  --inf-glow-blue-hover: 0 0 30px rgba(0, 210, 255, 0.6);
  --inf-glow-purple: 0 0 20px rgba(122, 40, 203, 0.3);
  --inf-glow-pink: 0 0 20px rgba(255, 0, 127, 0.3);
  --inf-glow-divider: 0 0 10px rgba(122, 40, 203, 0.8);

  /* ---------- Elevation (drop shadows on dark) ---------- */
  --inf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --inf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --inf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* ---------- Spacing (8pt) ---------- */
  --inf-space-0_5: 4px;
  --inf-space-1: 8px;
  --inf-space-2: 16px;
  --inf-space-3: 24px;
  --inf-space-4: 32px;
  --inf-space-6: 48px;
  --inf-space-8: 64px;
  --inf-space-12: 96px;

  /* ---------- Radii ---------- */
  --inf-radius-sm: 4px; /* grid cells, inline tags */
  --inf-radius-md: 8px; /* inputs, swatches, code */
  --inf-radius-lg: 12px; /* small cards, icon tiles */
  --inf-radius-xl: 16px; /* main cards, glass panels */
  --inf-radius-pill: 9999px; /* buttons, switches, dots */

  /* ---------- Typography families ---------- */
  --inf-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --inf-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --inf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Type scale (size / line-height / tracking) ---------- */
  --inf-type-display1-size: 60px;
  --inf-type-display1-lh: 1.1;
  --inf-type-display1-ls: -0.02em;
  --inf-type-h1-size: 36px;
  --inf-type-h1-lh: 1.2;
  --inf-type-h1-ls: -0.01em;
  --inf-type-h2-size: 24px;
  --inf-type-h2-lh: 1.3;
  --inf-type-h2-ls: 0;
  --inf-type-body-l-size: 18px;
  --inf-type-body-l-lh: 1.6;
  --inf-type-body-size: 16px;
  --inf-type-body-lh: 1.5;
  --inf-type-label-size: 14px;
  --inf-type-label-lh: 1.4;
  --inf-type-caption-size: 12px;
  --inf-type-caption-lh: 1.4;

  /* ---------- Motion ---------- */
  --inf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --inf-dur-fast: 150ms;
  --inf-dur: 300ms;
  --inf-dur-slow: 700ms;
}

/* =========================================================================
   Base
   ========================================================================= */

html,
body {
  background: var(--inf-deep-space);
  color: var(--inf-fg-2);
  font-family: var(--inf-font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: var(--inf-type-body-size);
  line-height: var(--inf-type-body-lh);
}

::selection {
  background: var(--inf-deep-nebula);
  color: #fff;
}

/* =========================================================================
   Semantic type roles
   ========================================================================= */

.inf-display-1,
h1.inf-display {
  font-family: var(--inf-font-display);
  font-weight: 700;
  font-size: var(--inf-type-display1-size);
  line-height: var(--inf-type-display1-lh);
  letter-spacing: var(--inf-type-display1-ls);
  color: var(--inf-fg-1);
}

.inf-h1,
h1 {
  font-family: var(--inf-font-display);
  font-weight: 700;
  font-size: var(--inf-type-h1-size);
  line-height: var(--inf-type-h1-lh);
  letter-spacing: var(--inf-type-h1-ls);
  color: var(--inf-fg-1);
}

.inf-h2,
h2 {
  font-family: var(--inf-font-display);
  font-weight: 600;
  font-size: var(--inf-type-h2-size);
  line-height: var(--inf-type-h2-lh);
  color: var(--inf-fg-1);
}

.inf-eyebrow {
  font-family: var(--inf-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inf-fg-3);
}

.inf-body-l,
p.lead {
  font-family: var(--inf-font-sans);
  font-weight: 400;
  font-size: var(--inf-type-body-l-size);
  line-height: var(--inf-type-body-l-lh);
  color: var(--inf-fg-2);
}

.inf-body,
p {
  font-family: var(--inf-font-sans);
  font-weight: 400;
  font-size: var(--inf-type-body-size);
  line-height: var(--inf-type-body-lh);
  color: var(--inf-fg-2);
}

.inf-label {
  font-family: var(--inf-font-sans);
  font-weight: 500;
  font-size: var(--inf-type-label-size);
  line-height: var(--inf-type-label-lh);
  color: var(--inf-fg-1);
}

.inf-caption,
small {
  font-family: var(--inf-font-sans);
  font-weight: 400;
  font-size: var(--inf-type-caption-size);
  line-height: var(--inf-type-caption-lh);
  color: var(--inf-fg-3);
}

code,
kbd,
samp,
pre,
.inf-mono {
  font-family: var(--inf-font-mono);
  font-size: 0.875em;
}

/* =========================================================================
   Helpers
   ========================================================================= */

.inf-text-gradient {
  background: var(--inf-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.inf-glass {
  background: var(--inf-glass-bg);
  backdrop-filter: var(--inf-glass-blur);
  -webkit-backdrop-filter: var(--inf-glass-blur);
  border: var(--inf-glass-border);
  border-radius: var(--inf-radius-xl);
}

.inf-divider-glow {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--inf-deep-nebula), transparent);
  box-shadow: var(--inf-glow-divider);
  opacity: 0.5;
}