/* ==========================================================================
   base.css — Design tokens, reset, typography, global defaults, utilities
   ========================================================================== */

/* ── Design Tokens ── */

/* ── HSL Primitives — modified by color scheme presets / sliders ── */
:root {
  /* Primary accent (Monochrome default: neutral gray) */
  --hue-primary: 220;
  --sat-primary: 10%;
  --light-primary: 45%;

  /* Secondary accent (Monochrome default: soft accent blue) */
  --hue-secondary: 220;
  --sat-secondary: 60%;
  --light-secondary: 50%;

  /* Color scheme presets — override via data-scheme attribute */
  /* Scheme: monochrome (default) — gray / single accent */
  /* Scheme: electric — blue-violet / chartreuse */
  /* Scheme: midnight — purple / cyan */
  /* Scheme: ember — crimson / warm gold */
  /* Scheme: forest — emerald / lime */

  /* Typography — updated by font changer */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* Spacing (8px base) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-stagger: 80ms;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Layout widths */
  --width-content: 720px;
  --width-wide: 1080px;
  --width-max: 1280px;
}

/* ── Dark Theme (default) ── */
:root,
[data-theme="dark"] {
  --color-primary: hsl(var(--hue-primary) var(--sat-primary) var(--light-primary));
  --color-primary-light: hsl(var(--hue-primary) calc(var(--sat-primary) - 10%) 65%);
  --color-primary-dark: hsl(var(--hue-primary) var(--sat-primary) 30%);
  --color-secondary: hsl(var(--hue-secondary) var(--sat-secondary) var(--light-secondary));
  --color-secondary-light: hsl(var(--hue-secondary) calc(var(--sat-secondary) - 10%) 60%);
  --color-secondary-dark: hsl(var(--hue-secondary) var(--sat-secondary) 32%);

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  --color-bg: hsl(220 40% 8%);
  --color-surface: hsl(220 35% 12%);
  --color-text: hsl(220 60% 96%);
  --color-text-light: hsl(220 25% 70%);
  --color-text-inverse: #ffffff;
  --color-muted: hsl(220 25% 70%);
  --color-border: hsl(0 0% 100% / 0.12);
  --color-border-hover: hsl(0 0% 100% / 0.22);

  --color-focus: var(--color-secondary);
  --color-link: var(--color-primary-light);
  --color-link-visited: hsl(var(--hue-primary) 40% 60%);

  --gradient-hero: linear-gradient(135deg, hsl(220 40% 8%) 0%, hsl(var(--hue-primary) 60% 14%) 50%, hsl(220 40% 8%) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(var(--hue-primary) clamp(40%, calc(var(--sat-primary) + 30%), 90%) clamp(28%, calc(var(--light-primary) - 8%), 42%)), hsl(var(--hue-primary) clamp(35%, calc(var(--sat-primary) + 20%), 85%) clamp(35%, calc(var(--light-primary) + 2%), 50%)));
  --gradient-text: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100% / 0.05) 0%, hsl(0 0% 100% / 0.02) 100%);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.2);
  --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.25);
  --shadow-lg: 0 10px 24px hsl(0 0% 0% / 0.3);
  --shadow-xl: 0 20px 60px hsl(0 0% 0% / 0.4);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --color-primary: hsl(var(--hue-primary) var(--sat-primary) 42%);
  --color-primary-light: hsl(var(--hue-primary) calc(var(--sat-primary) - 10%) 55%);
  --color-primary-dark: hsl(var(--hue-primary) var(--sat-primary) 32%);
  --color-secondary: hsl(var(--hue-secondary) var(--sat-secondary) 38%);
  --color-secondary-light: hsl(var(--hue-secondary) calc(var(--sat-secondary) - 10%) 50%);
  --color-secondary-dark: hsl(var(--hue-secondary) var(--sat-secondary) 28%);

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  --color-bg: hsl(220 20% 97%);
  --color-surface: hsl(220 20% 100%);
  --color-text: hsl(220 30% 12%);
  --color-text-light: hsl(220 15% 40%);
  --color-text-inverse: #ffffff;
  --color-muted: hsl(220 15% 55%);
  --color-border: hsl(220 15% 85%);
  --color-border-hover: hsl(220 15% 70%);

  --color-focus: hsl(var(--hue-primary) var(--sat-primary) 42%);
  --color-link: hsl(var(--hue-primary) var(--sat-primary) 42%);
  --color-link-visited: hsl(var(--hue-primary) 40% 35%);

  --gradient-hero: linear-gradient(135deg, hsl(220 20% 97%) 0%, hsl(var(--hue-primary) 30% 92%) 50%, hsl(220 20% 97%) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(var(--hue-primary) clamp(40%, calc(var(--sat-primary) + 30%), 90%) clamp(30%, calc(var(--light-primary) - 5%), 45%)), hsl(var(--hue-primary) clamp(35%, calc(var(--sat-primary) + 20%), 85%) clamp(38%, calc(var(--light-primary) + 5%), 52%)));
  --gradient-text: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100% / 0.8) 0%, hsl(0 0% 100% / 0.4) 100%);

  --shadow-sm: 0 1px 2px hsl(220 15% 75% / 0.2);
  --shadow-md: 0 4px 6px hsl(220 15% 75% / 0.15);
  --shadow-lg: 0 10px 24px hsl(220 15% 75% / 0.2);
  --shadow-xl: 0 20px 60px hsl(220 15% 75% / 0.25);
}

/* ── Color Scheme Presets ── */
[data-scheme="electric"] {
  --hue-primary: 250;
  --sat-primary: 90%;
  --light-primary: 44%;
  --hue-secondary: 60;
  --sat-secondary: 90%;
  --light-secondary: 44%;
}

[data-scheme="midnight"] {
  --hue-primary: 270;
  --sat-primary: 80%;
  --light-primary: 50%;
  --hue-secondary: 185;
  --sat-secondary: 85%;
  --light-secondary: 50%;
}

[data-scheme="ember"] {
  --hue-primary: 350;
  --sat-primary: 85%;
  --light-primary: 48%;
  --hue-secondary: 40;
  --sat-secondary: 90%;
  --light-secondary: 50%;
}

[data-scheme="forest"] {
  --hue-primary: 155;
  --sat-primary: 75%;
  --light-primary: 38%;
  --hue-secondary: 80;
  --sat-secondary: 80%;
  --light-secondary: 48%;
}

/* ── Arcade mode ── */
[data-mode="arcade"] {
  --hue-primary: 239;
  --sat-primary: 84%;
  --light-primary: 67%;
  --hue-secondary: 185;
  --sat-secondary: 80%;
  --light-secondary: 53%;

  --color-primary: hsl(var(--hue-primary) var(--sat-primary) var(--light-primary));
  --color-primary-light: hsl(var(--hue-primary) calc(var(--sat-primary) - 10%) 72%);
  --color-primary-dark: hsl(var(--hue-primary) var(--sat-primary) 55%);
  --color-secondary: hsl(var(--hue-secondary) var(--sat-secondary) var(--light-secondary));
  --color-secondary-light: hsl(var(--hue-secondary) calc(var(--sat-secondary) - 10%) 65%);
  --color-secondary-dark: hsl(var(--hue-secondary) var(--sat-secondary) 40%);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #6366f1;

  --color-bg: #080810;
  --color-surface: #0d0d18;
  --color-text: #ffffff;
  --color-text-light: rgba(255, 255, 255, 0.7);
  --color-text-inverse: #080810;
  --color-muted: rgba(255, 255, 255, 0.5);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);

  --color-focus: #22d3ee;
  --color-link: #8b5cf6;
  --color-link-visited: #a78bfa;

  --gradient-hero: linear-gradient(135deg, #080810 0%, #121220 50%, #080810 100%);
  --gradient-cta: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-text: linear-gradient(135deg, #6366f1, #22d3ee);
  --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* ── Theme Transition ── */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ── Font Pairings ── */
/* Default is "tech" — Space Grotesk + Inter, set in :root above */
[data-font="classic"] {
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
}

[data-font="geometric"] {
  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

[data-font="mono"] {
  --font-heading: "JetBrains Mono", "SFMono-Regular", monospace;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

[data-font="system"] {
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── CSS Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-snug);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

a:visited {
  color: var(--color-link-visited);
}

code {
  font-family: var(--font-family-mono);
}

/* ── Focus states ── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Utilities ── */
.muted {
  color: var(--color-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-overlay);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.skip-link:focus {
  top: 0;
}

/* ── Scroll Reveal ── */
/* Gated behind .js class added by init.js — content stays visible if JS fails */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.js .reveal--left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.js .reveal--right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.js .reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger children */
.stagger > .reveal:nth-child(1) { transition-delay: calc(0 * var(--transition-stagger)); }
.stagger > .reveal:nth-child(2) { transition-delay: calc(1 * var(--transition-stagger)); }
.stagger > .reveal:nth-child(3) { transition-delay: calc(2 * var(--transition-stagger)); }
.stagger > .reveal:nth-child(4) { transition-delay: calc(3 * var(--transition-stagger)); }
.stagger > .reveal:nth-child(5) { transition-delay: calc(4 * var(--transition-stagger)); }
.stagger > .reveal:nth-child(6) { transition-delay: calc(5 * var(--transition-stagger)); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal--left,
  .js .reveal--right,
  .js .reveal--scale {
    opacity: 1;
    transform: none;
  }
}

/* ── Print Styles ── */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  nav,
  .skip-link,
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    overflow-x: visible !important;
  }

  /* Hide loader, splash, and mode UI */
  .loader,
  #loading-screen,
  .splash,
  #mode-splash,
  .design-panel,
  .design-panel-trigger,
  .design-panel__backdrop {
    display: none !important;
  }

  /* Hide fixed-position interactive elements */
  .cursor-blob,
  .scroll-progress,
  .fab-cta,
  .sticky-bar,
  .mobile-sticky-bar {
    display: none !important;
  }

  /* Hide canvases and WebGL */
  canvas,
  .hero__canvas,
  .process__stars,
  .services__fire-canvas,
  .blog-bg,
  .blog-bg__canvas,
  .confetti-canvas {
    display: none !important;
  }

  /* Hide aurora bands, nebulae, and decorative overlays */
  [class*="__aurora"],
  .process__nebula,
  .process__shooting-star,
  .process__cursor-trail,
  .about__cursor-trail,
  .services__cursor-trail,
  .portfolio__decoration,
  .footer__aurora {
    display: none !important;
  }

  /* Hide hero decorative elements */
  .hero__orb,
  .hero__firefly,
  .hero__grain,
  .hero__scroll,
  .hero__bg {
    display: none !important;
  }

  /* Hide portfolio underwater decorations */
  .portfolio__fish,
  .portfolio__octopus,
  .portfolio__rain,
  .portfolio__ray,
  .portfolio__seaweed,
  .portfolio__bubble,
  .portfolio__vent-bubble,
  .portfolio__vent-mega,
  .portfolio__particles,
  .portfolio__surface,
  .portfolio__depth,
  .portfolio__fog,
  .portfolio__cursor-trail {
    display: none !important;
  }

  /* Hide marquee animations */
  .marquee {
    display: none !important;
  }

  /* Ensure fixed backgrounds don't print */
  .hero,
  .cta-band,
  section {
    position: relative !important;
    break-inside: avoid;
  }

  /* Reset sticky header */
  .site-header {
    position: relative !important;
  }

  /* Ensure text is readable */
  .gradient-text {
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }

  /* Show content that's hidden by JS reveal */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ensure images print */
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }

  /* Disable backdrop-filter for print */
  .hero__glass,
  .process__card,
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Page breaks */
  h1, h2, h3 {
    break-after: avoid;
  }

  .section {
    break-before: auto;
  }
}