/* =============================================================================
   BLOCKZILLA DESIGN SYSTEM — tokens.css
   The single source of design truth. Shared scale tokens live in :root; each
   [data-theme] re-scopes ONLY colors, fonts and atmosphere. Components must use
   these custom properties — never hardcode a theme's hex or font family.
   Themes: facet (monochrome premium) · chain (on-chain industrial) · prism
   (violet/cyan editorial-futurist).
   ============================================================================= */

:root {
  /* ---- type scale -------------------------------------------------------- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 40px;
  --fs-3xl: clamp(56px, 4vw + 2.5rem, 72px);

  /* ---- spacing scale (4px base) ----------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;

  /* ---- radii ------------------------------------------------------------- */
  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---- elevation (black-based, theme-agnostic) -------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .30);
  --sh-2: 0 12px 30px -16px rgba(0, 0, 0, .70), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --sh-3: 0 30px 70px -34px rgba(0, 0, 0, .85), 0 8px 24px -12px rgba(0, 0, 0, .6);

  /* ---- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .22s;
  --dur-slow: .5s;

  /* shell chrome metric (used by index.html shell + scroll padding) */
  --topbar-h: 60px;
}

/* =============================================================================
   THEME — FACET  · monochrome premium · silver facets · icy-cyan accent
   ============================================================================= */
[data-theme="facet"] {
  --bg: #0A0B0D;
  --bg-2: #14161B;
  --surface: #191C22;
  --surface-2: #1F232B;

  --line: #242833;
  --line-2: #30353F;

  --fg: #ECEFF3;
  --muted: #828A94;
  --faint: #767E8A;

  --accent: #5BE9FF;
  --accent-2: #2BB8D6;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent: #04121A;
  --mark: #C7CDD4;

  --success: #3FE0A0;
  --warning: #FFCB5B;
  --danger: #FF6B6B;
  --info: var(--accent);

  --font-display: "Cabinet Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --atmos:
    radial-gradient(940px 440px at 84% -12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    radial-gradient(760px 520px at -12% 112%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 62%),
    radial-gradient(1200px 700px at 50% -40%, color-mix(in srgb, var(--mark) 5%, transparent), transparent 60%);
}

/* =============================================================================
   THEME — CHAIN  · crypto / on-chain · electric green · faint grid · industrial
   ============================================================================= */
[data-theme="chain"] {
  --bg: #06080A;
  --bg-2: #0C1013;
  --surface: #0F1714;
  --surface-2: #142019;

  --line: #17241D;
  --line-2: #22332A;

  --fg: #E6F0EA;
  --muted: #6F8079;
  --faint: #687C72;

  --accent: #1CF09A;
  --accent-2: #0EA5A0;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent: #04140D;
  --mark: #BFEFD9;

  --success: #3FE0A0;
  --warning: #FFCB5B;
  --danger: #FF6B6B;
  --info: var(--accent);

  --font-display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --atmos:
    radial-gradient(860px 420px at 86% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(640px 520px at -8% 108%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 4%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 3%, transparent) 0 1px, transparent 1px 42px);
}

/* =============================================================================
   THEME — PRISM  · futuristic / editorial · violet + cyan mesh · premium SaaS
   ============================================================================= */
[data-theme="prism"] {
  --bg: #0B0A12;
  --bg-2: #15131F;
  --surface: #1A1726;
  --surface-2: #221E33;

  --line: #262236;
  --line-2: #332E47;

  --fg: #F2F0FF;
  --muted: #8983A6;
  --faint: #797295;

  --accent: #8B7BFF;
  --accent-2: #3CE0E0;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent: #0B0A12;
  --mark: #DAD4FF;

  --success: #3FE0A0;
  --warning: #FFCB5B;
  --danger: #FF6B6B;
  --info: var(--accent);

  --font-display: "Clash Display", "General Sans", system-ui, sans-serif;
  --font-body: "General Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --atmos:
    radial-gradient(780px 440px at 85% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(640px 400px at 6% 6%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 60%),
    radial-gradient(820px 640px at 50% 122%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(500px 500px at 78% 60%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 60%);
}

/* =============================================================================
   BASE — applied through theme tokens. Atmosphere is a fixed background layer.
   ============================================================================= */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-5));
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* fixed atmosphere — sits behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--atmos);
  pointer-events: none;
  transition: background var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}