/* ═══════════════════════════════════════════════════════════════
   HEKAWEB — Modular Design System
   4 independent categories × mix-and-match combinations
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE TOKENS (never change) ── */
:root {
  --void: #020204;
  --void-light: #06060a;
  --surface: #0c0c12;
  --surface-hover: #12121a;
  --border: #181820;
  --border-hover: #282836;
  --text: #eae8e3;
  --text-muted: #787680;
  --text-dim: #484850;

  /* Static accent colours */
  --cyan: #2dd4bf;
  --cyan-dim: #1a7a6e;
  --cyan-glow: rgba(45,212,191,0.1);
  --magenta: #d946ef;
  --red: #b04040;
  --green: #2a9d6a;

  /* Light theme tokens */
  --light-bg: #f5f0e8;
  --light-surface: #ede7dd;
  --light-surface-hover: #e5ddd0;
  --light-text: #1a1714;
  --light-text-muted: #6b6560;
  --light-text-dim: #a39e96;
  --light-border: #d9d2c7;
  --light-border-hover: #c4bbb0;
  --sand-bg: #e8e0d0;
  --warm-ivory: #faf6f0;

  /* ── TYPOGRAPHY (default: Sacred) ── */
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-weight-display: 400;
  --font-weight-heading: 400;
  --font-weight-body: 400;
  --font-tracking-display: 0.15em;
  --font-tracking-heading: 0.08em;
  --font-line-height: 1.6;
  --heading-scale: 1;
  --body-scale: 1;
  --label-transform: uppercase;
  --label-spacing: 3px;

  /* ── COMPONENTS (default: Sharp) ── */
  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --radius-pill: 50%;
  --radius-full: 50%;
  --shadow-card: none;
  --shadow-btn-hover: none;
  --shadow-focus: 0 0 0 2px var(--accent-glow);
  --border-width: 1px;
  --btn-padding: 0.85rem 2rem;
  --card-padding: 2.5rem;
  --input-padding: 0.75rem 1rem;

  /* ── PALETTE (default: Amber) ── */
  --accent: #c9a227;
  --accent-dim: #7a6620;
  --accent-glow: rgba(201,162,39,0.1);
  --accent-glow-strong: rgba(201,162,39,0.15);

  /* Backward compatibility: amber maps to accent */
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --amber-glow: var(--accent-glow);

  /* ── CONTAINERS (default: Flat) ── */
  --container-bg: var(--surface);
  --container-border: var(--border);
  --container-backdrop: none;
  --container-glow: none;
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY PRESETS
   ═══════════════════════════════════════════════════════════════ */

/* Sacred — Elegant editorial (default) */
html[data-font="sacred"] {
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-weight-display: 400;
  --font-weight-heading: 400;
  --font-weight-body: 400;
  --font-tracking-display: 0.15em;
  --font-tracking-heading: 0.08em;
  --font-line-height: 1.6;
  --heading-scale: 1.05;
  --body-scale: 1;
  --label-transform: uppercase;
  --label-spacing: 3px;
}

/* Clinical — Swiss precision, native system UI */
html[data-font="clinical"] {
  --font-display: 'Inter', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-weight-display: 700;
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --font-tracking-display: -0.03em;
  --font-tracking-heading: -0.01em;
  --font-line-height: 1.45;
  --heading-scale: 0.92;
  --body-scale: 0.96;
  --label-transform: uppercase;
  --label-spacing: 2px;
}

/* Cyber — Hacker terminal, ALL monospace */
html[data-font="cyber"] {
  --font-display: 'JetBrains Mono', monospace;
  --font-body: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --font-weight-display: 700;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-tracking-display: 0;
  --font-tracking-heading: 0;
  --font-line-height: 1.7;
  --heading-scale: 1;
  --body-scale: 1;
  --label-transform: none;
  --label-spacing: 1px;
}

/* Brutalist — Raw power, heavy sans + classic serif clash */
html[data-font="brutalist"] {
  --font-display: 'Inter', sans-serif;
  --font-body: Georgia, 'Times New Roman', Times, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-weight-display: 900;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --font-tracking-display: -0.05em;
  --font-tracking-heading: -0.02em;
  --font-line-height: 1.35;
  --heading-scale: 1.2;
  --body-scale: 1.05;
  --label-transform: uppercase;
  --label-spacing: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT VARIANT PRESETS
   ═══════════════════════════════════════════════════════════════ */

/* Sharp — Surgical precision (default) */
html[data-component="sharp"] {
  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --shadow-card: none;
  --shadow-btn-hover: none;
  --shadow-focus: 0 0 0 2px var(--accent-glow);
  --border-width: 1px;
  --btn-padding: 0.85rem 2rem;
  --card-padding: 2.5rem;
  --input-padding: 0.75rem 1rem;
}

/* Soft — Approachable, friendly */
html[data-component="soft"] {
  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-input: 8px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.25);
  --shadow-btn-hover: 0 12px 40px var(--accent-glow);
  --shadow-focus: 0 0 0 4px var(--accent-glow);
  --border-width: 1px;
  --btn-padding: 1rem 2.25rem;
  --card-padding: 2rem;
  --input-padding: 0.875rem 1.125rem;
}

/* Neon — Cyberpunk, electric */
html[data-component="neon"] {
  --radius-btn: 4px;
  --radius-card: 6px;
  --radius-input: 4px;
  --accent-glow: rgba(201,162,39,0.35);
  --accent-glow-strong: rgba(201,162,39,0.6);
  --shadow-card: 0 0 40px var(--accent-glow), 0 0 80px var(--accent-glow), inset 0 0 30px var(--accent-glow);
  --shadow-btn-hover: 0 0 60px var(--accent-glow-strong), 0 0 120px var(--accent-glow), 0 0 180px var(--accent-glow);
  --shadow-focus: 0 0 0 3px var(--accent), 0 0 60px var(--accent-glow-strong);
  --border-width: 1px;
  --btn-padding: 0.75rem 1.75rem;
  --card-padding: 2.25rem;
  --input-padding: 0.625rem 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════
   COLOUR PALETTE PRESETS
   ═══════════════════════════════════════════════════════════════ */

/* Amber — Sacred gold (default) */
html[data-palette="amber"] {
  --accent: #c9a227;
  --accent-dim: #7a6620;
  --accent-glow: rgba(201,162,39,0.1);
  --accent-glow-strong: rgba(201,162,39,0.15);
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --amber-glow: var(--accent-glow);
}

/* Cyan — Clinical teal */
html[data-palette="cyan"] {
  --accent: #2dd4bf;
  --accent-dim: #1a7a6e;
  --accent-glow: rgba(45,212,191,0.1);
  --accent-glow-strong: rgba(45,212,191,0.15);
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --amber-glow: var(--accent-glow);
}

/* Magenta — Editorial neon */
html[data-palette="magenta"] {
  --accent: #d946ef;
  --accent-dim: #7a2285;
  --accent-glow: rgba(217,70,239,0.1);
  --accent-glow-strong: rgba(217,70,239,0.15);
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --amber-glow: var(--accent-glow);
}

/* Jade — Organic green */
html[data-palette="jade"] {
  --accent: #2a9d6a;
  --accent-dim: #1a5e3f;
  --accent-glow: rgba(42,157,106,0.1);
  --accent-glow-strong: rgba(42,157,106,0.15);
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --amber-glow: var(--accent-glow);
}


/* ═══════════════════════════════════════════════════════════════
   CONTAINER TREATMENT PRESETS
   ═══════════════════════════════════════════════════════════════ */

/* Flat — Minimal, crisp (default) */
html[data-container="flat"] {
  --container-bg: var(--surface);
  --container-border: var(--border);
  --container-backdrop: none;
  --container-glow: none;
}

/* Glass — Ethereal, floating */
html[data-container="glass"] {
  --container-bg: rgba(255,255,255,0.03);
  --container-border: rgba(255,255,255,0.08);
  --container-backdrop: blur(20px) saturate(1.2);
  --container-glow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Gradient — Dimensional, warm */
html[data-container="gradient"] {
  --container-bg: linear-gradient(135deg, var(--surface) 0%, rgba(201,162,39,0.03) 100%);
  --container-border: rgba(201,162,39,0.15);
  --container-backdrop: none;
  --container-glow: 0 0 60px var(--accent-glow);
}

html[data-container="gradient"][data-palette="cyan"] {
  --container-bg: linear-gradient(135deg, var(--surface), rgba(45,212,191,0.03));
  --container-border: rgba(45,212,191,0.15);
}
html[data-container="gradient"][data-palette="magenta"] {
  --container-bg: linear-gradient(135deg, var(--surface), rgba(217,70,239,0.03));
  --container-border: rgba(217,70,239,0.15);
}
html[data-container="gradient"][data-palette="jade"] {
  --container-bg: linear-gradient(135deg, var(--surface), rgba(42,157,106,0.03));
  --container-border: rgba(42,157,106,0.15);
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL TRANSITIONS — Smooth morphing between all theme states
   ═══════════════════════════════════════════════════════════════ */

* {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Disable transition on elements that shouldn't morph */
.cursor,
.loader,
#webCanvas,
#aurora,
#heroThread {
  transition: none !important;
}

/* KILL THE CUSTOM CURSOR */
.cursor {
  display: none !important;
}
* {
  cursor: default !important;
}
a, button, [role="button"], .btn, .btn-mini, .ds-opt, input, textarea, select, label[for], .nav-links a, .mobile-links a, .work-link, .p-link, .faq-question, .est-option {
  cursor: pointer !important;
}

/* === RICH FOOTER === */
html body footer {
  border-top: 1px solid var(--border) !important;
  background: var(--void) !important;
  padding: 0 !important;
  text-align: left !important;
  position: relative !important;
}
html body footer::before {
  display: none !important;
}
html body footer .footer-rich {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 2rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
}
html body footer .footer-col {
  display: flex;
  flex-direction: column;
}
html body footer .footer-heading {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 0.6rem;
}
html body footer .footer-col a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  padding: 0.2rem 0;
  transition: color 0.25s;
  line-height: 1.4;
  display: block !important;
  margin: 0 !important;
}
html body footer .footer-col a:hover {
  color: var(--accent) !important;
}
html body footer .footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  text-align: center !important;
}
html body footer .footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim) !important;
  margin: 0 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center !important;
}
@media (max-width: 768px) {
  html body footer .footer-rich {
    grid-template-columns: repeat(2, 1fr);
    padding: 1.5rem 1.5rem 1rem;
    gap: 1.25rem 1.5rem;
  }
}
@media (max-width: 480px) {
  html body footer .footer-rich {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.25rem 0.75rem;
    gap: 1rem;
  }
  html body footer .footer-bottom {
    padding: 0.75rem 1.25rem;
  }
}

/* === MOBILE NAV === */
.mobile-menu:not(.open) {
  pointer-events: none;
}
.mobile-menu.open {
  pointer-events: auto;
}
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .mobile-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    text-align: center;
    align-items: center;
  }
  .mobile-links li {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 0;
  }
  .mobile-links a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 2px;
    transition: color 0.3s;
    padding: 0.5rem;
  }
  .mobile-links a:hover,
  .mobile-links a.active {
    color: var(--accent);
  }
}