/* ============================================================
   ZEANN CO — Design Tokens
   colors · type · spacing · radius · shadow · motion
   ============================================================ */

/* ---- Webfonts -------------------------------------------- */
/* Satoshi (Fontshare) for display + body — mirrors the reference site. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=jetbrains-mono@500,400&display=swap');

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Color · base ------------------------------------- */
  --bg-base:        #08090C;   /* near-black, slight cool tilt */
  --bg-deep:        #050609;   /* below-base, used for footer / well */
  --surface-1:      #101218;   /* cards, nav fill */
  --surface-2:      #171A22;   /* card hover, elevated */
  --surface-3:      #1F232C;   /* popovers */

  /* ---- Color · borders ---------------------------------- */
  --border-subtle:      #1F232C;
  --border-interactive: #2A2F3A;
  --border-strong:      #3A4050;

  /* ---- Color · foreground ------------------------------- */
  --fg-primary:    #EDEEF1;
  --fg-secondary:  #A0A4AE;
  --fg-tertiary:   #6A6F7B;
  --fg-muted:      #4A4F5A;
  --fg-on-accent:  #08090C;    /* dark text on phosphor button */

  /* ---- Color · brand accent (cyan, gradient-ready) ------ */
  /* Aliased to --accent-phosphor so all existing rules keep working. */
  --accent-cyan:        #22D3EE;
  --accent-cyan-hi:     #67E8F9;   /* hover */
  --accent-cyan-lo:     #0EA5E9;   /* press / gradient end */
  --accent-cyan-12:     rgba(34, 211, 238, 0.12);
  --accent-cyan-24:     rgba(34, 211, 238, 0.24);
  --accent-grad:        linear-gradient(135deg, #22D3EE 0%, #0EA5E9 100%);
  --accent-grad-hi:     linear-gradient(135deg, #67E8F9 0%, #22D3EE 100%);

  /* legacy aliases (the codebase used --accent-phosphor everywhere) */
  --accent-phosphor:    var(--accent-cyan);
  --accent-phosphor-hi: var(--accent-cyan-hi);
  --accent-phosphor-lo: var(--accent-cyan-lo);
  --accent-phosphor-12: var(--accent-cyan-12);
  --accent-phosphor-24: var(--accent-cyan-24);

  /* ---- Color · semantic --------------------------------- */
  --success: #7BE495;
  --warning: #FFC857;
  --danger:  #FF6B6B;
  --info:    #7DB7FF;

  --success-bg: rgba(123, 228, 149, 0.10);
  --warning-bg: rgba(255, 200, 87, 0.10);
  --danger-bg:  rgba(255, 107, 107, 0.10);
  --info-bg:    rgba(125, 183, 255, 0.10);

  /* ---- Type · families ---------------------------------- */
  /* Reference site (nateherk.com) uses Satoshi as its primary family.
     Satoshi 900 (Black) for display, 500/700 for body weight. */
  --font-sans:    'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type · scale ------------------------------------- */
  --fs-display:  clamp(72px, 11vw, 128px);
  --fs-h1:       clamp(40px, 5vw, 56px);
  --fs-h2:       clamp(28px, 3.6vw, 36px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-eyebrow:  12px;
  --fs-mono:     14px;

  /* ---- Type · weight ------------------------------------ */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- Type · tracking ---------------------------------- */
  --tr-tight-3: -0.03em;
  --tr-tight-2: -0.02em;
  --tr-tight-1: -0.01em;
  --tr-normal:   0;
  --tr-wide:     0.08em;
  --tr-eyebrow:  0.18em;

  /* ---- Type · leading ----------------------------------- */
  --lh-display: 0.95;
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ---- Spacing scale ------------------------------------ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ---- Radius ------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow & elevation ------------------------------- */
  --shadow-none:  none;
  --shadow-sm:    0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 12px rgba(0,0,0,0.3);
  --shadow-md:    0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 24px -8px rgba(0,0,0,0.5);
  --shadow-lg:    0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -12px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 0 1px var(--accent-phosphor-24), 0 0 32px var(--accent-phosphor-12);

  /* ---- Layout ------------------------------------------- */
  --content-max:    1200px;
  --gutter-mobile:    24px;
  --gutter-desktop:   48px;
  --nav-h:            64px;

  /* ---- Motion ------------------------------------------- */
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);    /* default, mostly out */
  --ease-micro:  cubic-bezier(0.4, 0, 0.2, 1);      /* hover, focus */
  --dur-hover:   120ms;
  --dur-state:   220ms;
  --dur-reveal:  420ms;
  --dur-scroll:  800ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply to bare HTML so anything dropped in inherits the brand.
   ============================================================ */
html, body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-phosphor); color: var(--fg-on-accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  margin: 0;
  font-weight: var(--fw-semi);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--tr-tight-2); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--tr-tight-2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-tight-1); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-tight-1); line-height: var(--lh-snug); }

p, li { color: var(--fg-secondary); text-wrap: pretty; }
p     { margin: 0 0 var(--sp-4); }

a {
  color: var(--fg-primary);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-state) var(--ease-soft), color var(--dur-state) var(--ease-soft);
}
a:hover { background-size: 100% 1px; color: var(--accent-phosphor); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-primary);
}
code {
  padding: 2px 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--sp-7) 0;
}

/* ============================================================
   UTILITY CLASSES — semantic shortcuts
   ============================================================ */
.display      { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; letter-spacing: var(--tr-tight-3); line-height: var(--lh-display); }
.eyebrow      { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-tertiary); }
.eyebrow::before {
  content: ""; display: inline-block; width: 4px; height: 4px;
  background: var(--accent-phosphor); margin-right: 12px; vertical-align: 2px;
}
.mono         { font-family: var(--font-mono); }
.muted        { color: var(--fg-tertiary); }
.accent       { color: var(--accent-phosphor); }

/* Reusable cursor-block element */
.cursor-block {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  background: var(--accent-phosphor);
  vertical-align: -0.08em;
  margin-left: 0.08em;
  animation: cursor-blink 1s steps(2, end) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Page noise overlay (apply to body or hero) */
.noise-overlay {
  position: relative;
}
.noise-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.6;
}