/* ============================================================================
   Cortex — design tokens
   Dark voxel command center. Single (dark) theme by design; every color is
   painted explicitly so the page never inherits a host background.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces ---------------------------------------------------------- */
  --c-bg: #0f1115;               /* stone */
  --c-bg-deep: #0a0c10;          /* footer / below-the-fold */
  --c-surface-1: #14171d;        /* raised */
  --c-surface-2: #1a1e26;        /* raised, higher */
  --c-surface-3: #20252f;        /* hover / active */
  --c-glass: rgba(20, 23, 29, 0.62);
  --c-glass-raised: rgba(26, 30, 38, 0.72);

  /* ---- Borders ----------------------------------------------------------- */
  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-hover: rgba(255, 255, 255, 0.14);
  --c-border-strong: rgba(255, 255, 255, 0.22);
  --c-border-accent: rgba(16, 185, 129, 0.45);
  --c-top-highlight: rgba(255, 255, 255, 0.10);

  /* ---- Text -------------------------------------------------------------- */
  --c-text: #e6e8ee;
  --c-text-muted: #9aa3b2;
  --c-text-faint: #5c6370;
  --c-text-on-accent: #06281c;

  /* ---- Accent: emerald --------------------------------------------------- */
  --c-accent: #10b981;
  --c-accent-hover: #34d399;
  --c-accent-deep: #059669;
  --c-accent-soft: rgba(16, 185, 129, 0.12);
  --c-accent-glow: rgba(16, 185, 129, 0.35);

  /* ---- Secondary / semantic --------------------------------------------- */
  --c-cyan: #22d3ee;
  --c-cyan-soft: rgba(34, 211, 238, 0.12);
  --c-danger: #f43f5e;
  --c-danger-soft: rgba(244, 63, 94, 0.14);
  --c-warning: #f59e0b;
  --c-warning-soft: rgba(245, 158, 11, 0.14);
  --c-success: var(--c-accent);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Outfit", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.80rem + 0.15vw, 0.90rem);
  --fs-base: clamp(0.98rem, 0.95rem + 0.20vw, 1.08rem);
  --fs-md: clamp(1.08rem, 1.02rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.30rem, 1.15rem + 0.70vw, 1.70rem);
  --fs-xl: clamp(1.70rem, 1.35rem + 1.60vw, 2.50rem);
  --fs-2xl: clamp(2.10rem, 1.50rem + 2.80vw, 3.60rem);
  --fs-3xl: clamp(2.60rem, 1.70rem + 4.20vw, 4.80rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --gutter: 1rem;                                  /* never below 16px */
  --container: 1200px;
  --section-pad: clamp(4rem, 5vw + 2rem, 7rem);

  /* ---- Radii ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows & glows --------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.65);
  --sh-xl: 0 32px 80px -24px rgba(0, 0, 0, 0.75);
  --sh-inset-top: inset 0 1px 0 var(--c-top-highlight);
  --glow-accent: 0 0 0 1px var(--c-border-accent), 0 0 24px -4px var(--c-accent-glow);
  --glow-accent-lg: 0 0 0 1px var(--c-border-accent), 0 0 64px -8px var(--c-accent-glow);
  --glow-cyan: 0 0 24px -6px rgba(34, 211, 238, 0.45);
  --glow-danger: 0 0 24px -6px rgba(244, 63, 94, 0.5);
  --ring-focus: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);

  /* ---- Glass ------------------------------------------------------------- */
  --blur-glass: 14px;
  --blur-nav: 18px;

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-skip: 3000;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 640ms;
  --dur-pulse: 2.2s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Voxel helpers ----------------------------------------------------- */
  --voxel-size: 48px;
  --voxel-top: #34d399;
  --voxel-left: #10b981;
  --voxel-right: #059669;
  --voxel-outline: rgba(6, 40, 28, 0.55);
}

/* ============================================================================
   Texture utilities — fine grid, scanlines, ambient glow. Apply to a
   position:relative parent; the pseudo-element sits behind the content.
   ========================================================================== */

.texture-grid,
.texture-scanlines,
.texture-glow {
  position: relative;
  isolation: isolate;
}

.texture-grid::before,
.texture-scanlines::before,
.texture-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
}

/* 32px voxel grid, very low opacity, fading out towards the edges */
.texture-grid::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* CRT-style horizontal scanlines */
.texture-scanlines::before {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Soft emerald ambient glow — place behind hero art */
.texture-glow::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--c-accent-glow), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(34, 211, 238, 0.12), transparent 70%);
  filter: blur(40px);
  opacity: 0.55;
}

/* Combine grid + glow on one element */
.texture-grid.texture-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--c-accent-glow), transparent 70%);
  filter: blur(40px);
  opacity: 0.5;
}

/* Standalone element variants for layering inside a panel */
.grid-overlay,
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.scanline-overlay {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}