/* ==========================================================================
   ABELIA SOLUTION — Design tokens
   Systems Schematic: soft-dark surfaces, one indigo accent, mono for
   technical data. Palette pulled from the "Modern Dark Cinema" reference
   (deep near-black + indigo, not pure black + cyan) to read as a considered
   choice rather than the default dark-SaaS cyan-on-black look.
   ========================================================================== */

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

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plexmono-500.woff2") format("woff2");
}

:root {
  /* --- Color: surfaces ---------------------------------------------- */
  --color-bg: #020203;
  --color-bg-secondary: #08080A;
  --color-card: #0E0E11;
  --color-card-hover: #131316;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  /* --- Color: text ---------------------------------------------------- */
  --color-text: #EDEDEF;
  --color-text-secondary: #8A8F98;
  --color-text-tertiary: #5C6067;

  /* --- Color: accent (Signal Indigo) — used sparingly ------------------- */
  --color-accent: #5E6AD2;
  --color-accent-hover: #7680DD;
  --color-accent-dim: #454FA0;
  --color-accent-glow: rgba(94, 106, 210, 0.18);
  --color-accent-glow-strong: rgba(94, 106, 210, 0.34);
  /* Lighter than --color-accent specifically for small text/links on dark
     surfaces: #5E6AD2 sits at ~4.4:1 on the page background, just under the
     4.5:1 AA floor for body-size text. Use this token wherever the accent
     colors text rather than a background/border. */
  --color-accent-text: #6B76D6;

  /* --- Color: semantic (kept separate from the accent) ---------------- */
  --color-success: #34D399;
  --color-warning: #F5B942;
  --color-danger: #F2596B;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.5rem, 4.6vw + 1rem, 5rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  /* --- Spacing (4px base scale) ----------------------------------------- */
  --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;

  /* --- Layout ------------------------------------------------------------ */
  --container-width: 1180px;
  --container-padding: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* --- Elevation (hairline-first: borders + very soft glow, no drop shadows) */
  --ring-focus: 0 0 0 3px var(--color-accent-glow-strong);

  --z-nav: 100;
  --z-overlay: 200;
}