/* ============================================================
   ZapNote — Cinematic redesign
   base.css  ·  design tokens, reset, typography, primitives
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* — narrative neutrals: charcoal → graphite → warm white — */
  --ink:            #06080F;   /* deepest cinematic black */
  --graphite-950:   #080B14;
  --graphite-900:   #0B1120;   /* brand dark (matches source) */
  --graphite-850:   #0F1624;
  --graphite-800:   #131C2E;
  --graphite-700:   #1D2740;
  --graphite-600:   #2A3550;

  --paper:          #FBFAF7;   /* warm white */
  --paper-2:        #F3F1EB;
  --mist:           #E9E7E0;

  --slate-900:      #0F172A;
  --slate-700:      #334155;
  --slate-600:      #475569;
  --slate-500:      #64748B;
  --slate-400:      #94A3B8;
  --slate-300:      #CBD5E1;
  --slate-200:      #E2E8F0;

  /* — accent: brand blue → teal (elevated) — */
  --accent:         #2F6BFF;
  --accent-600:     #2563EB;
  --accent-400:     #5B8DEF;
  --teal:           #16C6C0;
  --teal-300:       #57E0D6;
  --emerald:        #10B981;

  --grad-brand:     linear-gradient(100deg, #3B82F6 0%, #16C6C0 100%);
  --grad-brand-soft:linear-gradient(100deg, #5B8DEF 0%, #57E0D6 100%);
  --grad-ink:       linear-gradient(180deg, #0B1120 0%, #06080F 100%);

  /* — glass surfaces (Vision-Pro / iOS-26 inspired) — */
  --glass-dark:      rgba(18, 26, 44, 0.42);
  --glass-dark-2:    rgba(12, 18, 33, 0.55);
  --glass-light:     rgba(255, 255, 255, 0.66);
  --glass-stroke:    rgba(255, 255, 255, 0.12);
  --glass-stroke-lt: rgba(15, 23, 42, 0.08);
  --glass-hi:        rgba(255, 255, 255, 0.55);   /* edge light */
  --blur:            22px;
  --blur-lg:         40px;

  /* — type — */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* fluid type scale */
  --fs-hero:   clamp(2.9rem, 7.2vw, 6.6rem);
  --fs-h1:     clamp(2.4rem, 5.2vw, 4.6rem);
  --fs-h2:     clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-h3:     clamp(1.3rem, 2vw, 1.7rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:   clamp(1rem, 1.1vw, 1.075rem);
  --fs-sm:     0.86rem;
  --fs-xs:     0.75rem;

  --eyebrow-ls: 0.24em;

  /* — layout — */
  --maxw:     1240px;
  --maxw-nar: 880px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --radius:   26px;
  --radius-sm:16px;
  --radius-lg:34px;

  --shadow-glass: 0 24px 60px -20px rgba(6,8,15,0.55), inset 0 1px 0 var(--glass-hi);
  --shadow-soft:  0 20px 50px -24px rgba(15,23,42,0.35);
  --shadow-lift:  0 40px 90px -40px rgba(6,8,15,0.7);

  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 74px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate-700);
  background: var(--graphite-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: rgba(47,107,255,0.28); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}

/* ---------- utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-nar); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--accent-400);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--accent-400), transparent);
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--slate-600); font-weight: 400; }

.section { position: relative; padding-block: clamp(5rem, 11vw, 9.5rem); }

/* dark vs light section skins (the narrative arc) */
.skin-dark  { background: var(--graphite-900); color: var(--slate-300); }
.skin-dark h1, .skin-dark h2, .skin-dark h3 { color: #fff; }
.skin-ink   { background: var(--grad-ink); color: var(--slate-300); }
.skin-ink h1, .skin-ink h2, .skin-ink h3 { color: #fff; }
.skin-paper { background: var(--paper); color: var(--slate-600); }
.skin-paper h1, .skin-paper h2, .skin-paper h3 { color: var(--slate-900); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.95em 1.7em;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  transition: transform 0.5s var(--ease-cine), box-shadow 0.5s var(--ease-cine), background 0.4s, color 0.4s, border-color 0.4s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: #fff;
  background: var(--accent-600);
  background-image: var(--grad-brand);
  box-shadow: 0 12px 30px -10px rgba(47,107,255,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn--primary:hover { box-shadow: 0 20px 44px -12px rgba(47,107,255,0.7), inset 0 1px 0 rgba(255,255,255,0.4); }

.btn--ghost {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }

.btn--dark {
  color: var(--slate-900);
  background: rgba(15,23,42,0.05);
  border: 1px solid var(--glass-stroke-lt);
}
.btn--dark:hover { background: rgba(15,23,42,0.09); }

.btn--lg { padding: 1.05em 2.1em; font-size: 1rem; }

/* ---------- reveal primitives (JS toggles .is-in) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

.reveal-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-cine); }
.reveal-clip.is-in { clip-path: inset(0 0 -5% 0); }

/* ---------- accessibility ---------- */
:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 3px; border-radius: 4px; }
.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: fixed; top: -100px; left: 16px; z-index: 999;
  background: #fff; color: var(--slate-900); padding: 10px 18px; border-radius: 10px;
  transition: top 0.3s;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-clip { clip-path: none !important; }
}