/* Pagify base styles — mirrors /assets/DESIGN.md (Techno-Organic Pulse). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Brand */
  --deep-space:     #15163E;
  --electric-coral: #F0533F;
  --fresh-mint:     #36DDC4;
  --paper-cream:    #FBF3E4;

  /* Surface tiers */
  --surface:                   #0d0e36;
  --surface-container-low:     #16173f;
  --surface-container:         #1a1b43;
  --surface-container-high:    #25264e;
  --surface-container-highest: #2f315a;
  --on-surface:                #e1e0ff;
  --on-surface-variant:        #e2beb8;
  --tertiary:                  #c1c1ff;
  --tertiary-container:        #8b8cc5;
  --outline:                   #aa8984;
  --outline-variant:           #5a413c;

  /* Radii */
  --radius-sm:    0.25rem;
  --radius:       0.5rem;
  --radius-md:    0.75rem;
  --radius-lg:    1rem;
  --radius-xl:    1.5rem;
  --radius-full:  9999px;

  /* Spacing */
  --base:           8px;
  --container-max:  1280px;
  --gutter:         24px;
  --margin-mobile:  16px;
  --stack-sm:       8px;
  --stack-md:       16px;
  --stack-lg:       32px;
  --section-gap:    80px;

  /* Solid Offset shadow primitives */
  --offset-coral:    4px 4px 0 var(--electric-coral);
  --offset-mint:     4px 4px 0 var(--fresh-mint);
  --offset-cream:    4px 4px 0 var(--paper-cream);
  --offset-mint-sm:  2px 2px 0 var(--fresh-mint);

  /* Border primitives */
  --border-structural: 1px solid rgba(251, 243, 228, 0.12);
  --border-mint-soft:  1px solid rgba(54, 221, 196, 0.18);
  --border-coral-soft: 1px solid rgba(240, 83, 63, 0.20);
  --border-input:      1px solid rgba(251, 243, 228, 0.30);
  --border-rule:       1px solid var(--tertiary);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--deep-space);
  color: var(--paper-cream);
  -webkit-font-smoothing: antialiased;
}

/* Typography roles */
.display-lg {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 64px;
  line-height: 1.1; letter-spacing: -0.02em;
}
@media (max-width: 820px) {
  .display-lg { font-size: 40px; letter-spacing: -0.01em; }
}
.headline-md {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 32px; line-height: 1.2;
}
.headline-sm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 24px; line-height: 1.3;
}
.body-lg {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 18px; line-height: 1.6;
}
.label-caps {
  font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.label-mono {
  font-family: 'Space Mono', monospace;
  font-size: 14px; line-height: 1.4;
}

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