/* ============================================================
   Wize Marketing: Design tokens
   Source: Wize Marketing Design System (Claude Design project)
   Fonts embedded: New Spirit Condensed (display), Pain de Mie (serif accent).
   Body face "Helvetica Neue Wize" intentionally omitted. The source
   TTF exceeded the design-system pull limit and was corrupted on
   download; body text falls back to the system Helvetica Neue/Arial
   stack in --font-body, which is visually equivalent and safe.
   ============================================================ */

@font-face {
  font-family: "New Spirit Condensed";
  src: url("../assets/fonts/NewSpirit-RegularCondensed.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pain de Mie";
  src: url("../assets/fonts/PainDeMie-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand palette (raw) --------------------------------- */
  --wize-sand:  #e8e6da;
  --wize-lime:  #e0ff5f;
  --wize-lilac: #d5b8fa;
  --wize-black: #0c0c0c;
  --wize-red:   #fd4d04;
  --wize-white: #ffffff;

  --wize-lime-deep:  #c9e83f;
  --wize-lilac-deep: #bd97f5;
  --wize-sand-deep:  #dcdac9;
  --wize-red-deep:   #e34503;
  --wize-ink-70: rgba(12,12,12,0.70);
  --wize-ink-55: rgba(12,12,12,0.55);
  --wize-ink-12: rgba(12,12,12,0.12);
  --wize-ink-08: rgba(12,12,12,0.08);
  --wize-ink-05: rgba(12,12,12,0.05);

  --wize-lime-wash:  rgba(224,255,95,0.30);
  --wize-lime-soft:  rgba(224,255,95,0.14);
  --wize-lilac-wash: rgba(213,184,250,0.35);
  --wize-lilac-soft: rgba(213,184,250,0.16);
  --wize-red-wash:   rgba(253,77,4,0.16);
  --wize-red-soft:   rgba(253,77,4,0.09);

  --gradient-brand:      linear-gradient(135deg, var(--wize-lilac) 0%, var(--wize-lime) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--wize-lilac-soft) 0%, var(--wize-lime-soft) 100%);
  --gradient-text:       linear-gradient(135deg, var(--wize-lilac-deep) 0%, var(--wize-red) 100%);
  --gradient-warm:       linear-gradient(135deg, var(--wize-red) 0%, var(--wize-lime) 100%);
  --gradient-ink:        linear-gradient(160deg, #1c1c1c 0%, var(--wize-black) 100%);
  --mesh-hero: radial-gradient(circle at 15% 20%, var(--wize-lilac-wash) 0%, transparent 45%),
               radial-gradient(circle at 85% 15%, var(--wize-lime-wash) 0%, transparent 45%),
               radial-gradient(circle at 50% 90%, var(--wize-red-soft) 0%, transparent 50%);

  --surface-page:      var(--wize-white);
  --surface-secondary: var(--wize-sand);
  --surface-card:      var(--wize-white);
  --surface-ink:       var(--wize-black);

  --text-strong: var(--wize-black);
  --text-body:   var(--wize-black);
  --text-muted:  var(--wize-ink-55);
  --text-on-ink: var(--wize-white);

  --border-ink:      var(--wize-black);
  --border-hairline: var(--wize-ink-08);
  --border-subtle:   var(--wize-ink-12);
  --stroke-width: 1px;
  --stroke-bold:  1.5px;

  --focus-ring: var(--wize-red);

  /* --- Type ------------------------------------------------- */
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "New Spirit Condensed", Georgia, serif;
  --font-serif:   "Pain de Mie", Georgia, "Times New Roman", serif;

  --fs-d1:   clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1:   2.25rem;
  --fs-h2:   1.75rem;
  --fs-h3:   1.375rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  --lh-tight:  1.02;
  --lh-snug:   1.12;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --ls-tight: -0.02em;
  --ls-label: 0.08em;
  --ls-wide:  0.14em;

  /* --- Spacing (4px base) ------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(12,12,12,0.05);
  --shadow-sm: 0 2px 8px rgba(12,12,12,0.06), 0 1px 2px rgba(12,12,12,0.04);
  --shadow-md: 0 8px 24px rgba(12,12,12,0.08), 0 2px 6px rgba(12,12,12,0.04);
  --shadow-lg: 0 32px 64px rgba(12,12,12,0.10), 0 8px 20px rgba(12,12,12,0.04);
  --shadow-glow-lime:  0 8px 28px rgba(224,255,95,0.45);
  --shadow-glow-lilac: 0 8px 28px rgba(213,184,250,0.5);

  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }
/* Picture wrappers should never introduce their own box: without this,
   picture sizes itself from the img's width/height attributes rather
   than its CSS-scaled size, leaving the img left-aligned inside an
   oversized invisible wrapper instead of truly centered. */
picture { display: contents; }

::selection { background: var(--wize-lime); color: var(--wize-black); }

.wize-halftone {
  background-image: radial-gradient(var(--wize-black) 28%, transparent 29%);
  background-size: 10px 10px;
}

.wize-mesh {
  position: absolute;
  inset: 0;
  background: var(--mesh-hero);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.wize-gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wize-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--wize-lilac-soft);
}