/* ============================================================
   Bit Benders — "Aetheric Flux" central theme
   Single source of truth for all design tokens.
   Edit a variable here and every page + Tailwind utility updates.
   ============================================================ */

:root {
  /* ---- Surfaces ---------------------------------------------------- */
  --color-surface: #101415;
  --color-surface-dim: #101415;
  --color-surface-bright: #363a3b;
  --color-surface-container-lowest: #0b0f10;
  --color-surface-container-low: #191c1e;
  --color-surface-container: #1d2022;
  --color-surface-container-high: #272a2c;
  --color-surface-container-highest: #323537;
  --color-surface-variant: #323537;
  --color-surface-tint: #abd600;

  /* ---- Background -------------------------------------------------- */
  --color-background: #101415;
  --color-on-background: #e0e3e5;

  /* ---- On-surface text -------------------------------------------- */
  --color-on-surface: #e0e3e5;
  --color-on-surface-variant: #c4c9ac;
  --color-inverse-surface: #e0e3e5;
  --color-inverse-on-surface: #2d3133;
  --color-outline: #8e9379;
  --color-outline-variant: #444933;

  /* ---- Primary (Cyber-lime) --------------------------------------- */
  --color-primary: #ffffff;
  --color-on-primary: #283500;
  --color-primary-container: #c3f400;
  --color-on-primary-container: #556d00;
  --color-inverse-primary: #506600;
  --color-primary-fixed: #c3f400;
  --color-primary-fixed-dim: #abd600;
  --color-on-primary-fixed: #161e00;
  --color-on-primary-fixed-variant: #3c4d00;

  /* ---- Secondary (Electric Violet) -------------------------------- */
  --color-secondary: #d0bcff;
  --color-on-secondary: #3c0091;
  --color-secondary-container: #571bc1;
  --color-on-secondary-container: #c4abff;
  --color-secondary-fixed: #e9ddff;
  --color-secondary-fixed-dim: #d0bcff;
  --color-on-secondary-fixed: #23005c;
  --color-on-secondary-fixed-variant: #5516be;

  /* ---- Tertiary ---------------------------------------------------- */
  --color-tertiary: #ffffff;
  --color-on-tertiary: #313032;
  --color-tertiary-container: #e5e1e4;
  --color-on-tertiary-container: #656466;
  --color-tertiary-fixed: #e5e1e4;
  --color-tertiary-fixed-dim: #c8c6c8;
  --color-on-tertiary-fixed: #1c1b1d;
  --color-on-tertiary-fixed-variant: #474649;

  /* ---- Error ------------------------------------------------------- */
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  /* ---- Glow RGB triplets (for rgba() in shadows) ------------------ */
  --glow-primary-rgb: 171, 214, 0;     /* primary-fixed-dim #abd600 */
  --glow-secondary-rgb: 208, 188, 255; /* secondary #d0bcff         */

  /* ---- Spacing (8px baseline) ------------------------------------- */
  --space-base: 8px;
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-gutter: 24px;
  --space-margin: 32px;

  /* ---- Corner radius ---------------------------------------------- */
  /* NOTE: kept to the mockup Tailwind scale so existing utility
     classes (rounded / rounded-lg / rounded-xl / rounded-full)
     keep their original appearance. */
  --radius-default: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* ---- Typography -------------------------------------------------- */
  --font-display: "Space Grotesk", sans-serif; /* headings + labels */
  --font-body: "Inter", sans-serif;            /* body copy         */

  --text-h1: 4.5rem;
  --leading-h1: 1.1;
  --tracking-h1: -0.02em;

  --text-h2: 3rem;
  --leading-h2: 1.2;
  --tracking-h2: -0.01em;

  --text-h3: 2rem;
  --leading-h3: 1.3;
  --tracking-h3: 0;

  --text-body-lg: 1.125rem;
  --leading-body-lg: 1.6;

  --text-body-md: 1rem;
  --leading-body-md: 1.5;

  --text-label-caps: 0.75rem;
  --leading-label-caps: 1;
  --tracking-label-caps: 0.1em;

  /* ---- Glass / depth ---------------------------------------------- */
  --glass-fill: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 20px;
  --grid-line: rgba(255, 255, 255, 0.03);
  --grid-size: 64px;
}

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

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-body);
}

/* Faint high-tech background grid (use class .grid-bg / .tech-grid,
   or apply directly to body via the .has-grid helper). */
.grid-bg,
.tech-grid,
.has-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* ============================================================
   Components
   ============================================================ */

/* Glassmorphic surface — primary container for the system.
   .glass is an alias used by some mockups. */
.glass-card,
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* Accent elevation — neon bloom on hover. */
.cyber-glow-primary:hover {
  box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.25);
}

.cyber-glow-secondary:hover {
  box-shadow: 0 0 15px rgba(var(--glow-secondary-rgb), 0.25);
}

/* Always-on primary glow (used on solid CTAs). */
.cyber-glow {
  box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.2);
}

/* Card border lights up cyber-lime on hover. */
.cyber-glow-border {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cyber-glow-border:hover {
  border-color: var(--color-primary-fixed);
  box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.15);
}

/* White → cyber-lime text gradient for hero headings. */
.gradient-text {
  background: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-primary-fixed)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtle diagonal lime → violet wash for premium panels. */
.tech-gradient {
  background: linear-gradient(
    135deg,
    rgba(195, 244, 0, 0.1) 0%,
    rgba(87, 27, 193, 0.1) 100%
  );
}