/* ════════════════════════════════════════════════════════════════
   Roman Rohalevskyi — Portfolio · Tokens + Base styles
   Black canvas, rose accent (lime alternate via [data-accent="lime"]).
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Surfaces (true black canvas, layered) ── */
  --bg:        #0A0A0A;
  --surface:   #131316;
  --surface-2: #1A1A1F;
  --surface-3: #232328;

  /* ── Borders ── */
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.03);
  --border-hi: rgba(255,255,255,0.18);

  /* ── Text ── */
  --fg1: #FAFAFA;
  --fg2: #A1A1AA;
  --fg3: #71717A;
  --muted: #52525B;

  /* ── Signature accent: ROSE ── */
  --accent:       #F43F5E;
  --accent-hi:    #FB7185;
  --accent-lo:    #E11D48;
  --accent-fill:  rgba(244, 63, 94, 0.12);
  --accent-soft:  rgba(244, 63, 94, 0.20);
  --accent-glow:  rgba(244, 63, 94, 0.45);
  --accent-bloom: rgba(244, 63, 94, 0.28);

  /* ── Secondary signal colors (sparingly) ── */
  --teal:      #34D399;
  --teal-fill: rgba(52, 211, 153, 0.12);
  --amber:     #F59E0B;

  /* ── Fonts ── */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale ── */
  --t-display: 800 clamp(48px, 7.5vw, 108px)/0.95  var(--font-display);
  --t-h1:      700 clamp(36px, 5.4vw, 72px)/1.0  var(--font-display);
  --t-h2:      700 clamp(26px, 3.2vw, 42px)/1.1  var(--font-display);
  --t-h3:      600 clamp(18px, 1.6vw, 22px)/1.2  var(--font-display);
  --t-lead:    400 clamp(17px, 1.4vw, 20px)/1.55 var(--font-sans);
  --t-body:    400 16px/1.6 var(--font-sans);
  --t-small:   500 13px/1.5 var(--font-sans);
  --t-mono:    500 12.5px/1.4 var(--font-mono);
  --t-eye:     600 11px/1 var(--font-mono);

  /* ── Tracking ── */
  --tr-tight:  -0.03em;
  --tr-display:-0.045em;
  --tr-eye:    0.14em;
  --tr-mono:   0.02em;

  /* ── Spacing (4px base) ── */
  --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;

  /* ── Radii ── */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.4);
  --sh-md: 0 12px 36px rgba(0,0,0,0.45);
  --sh-lg: 0 32px 80px rgba(0,0,0,0.55);
  --sh-accent: 0 10px 36px rgba(244,63,94,0.35);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.05);

  /* ── Motion ── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.15s;
  --dur:       0.3s;
  --dur-slow:  0.6s;

  /* ── Layout ── */
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* ── Lime alternate (via data-accent="lime") ─────────────────── */
[data-accent="lime"] {
  --accent:       #A3E635;
  --accent-hi:    #BEF264;
  --accent-lo:    #84CC16;
  --accent-fill:  rgba(163, 230, 53, 0.12);
  --accent-soft:  rgba(163, 230, 53, 0.20);
  --accent-glow:  rgba(163, 230, 53, 0.45);
  --accent-bloom: rgba(163, 230, 53, 0.30);
  --sh-accent:    0 10px 36px rgba(163, 230, 53, 0.28);
}

/* ════════════════════════════════════════════════════════════════
   Reset + base
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

/* Faint grain so the dark surfaces don't feel sterile */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMS40JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoJTIzbiknLz48L3N2Zz4=");
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Generic container */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* Eyebrow */
.eye {
  font: var(--t-eye);
  letter-spacing: var(--tr-eye);
  text-transform: uppercase;
  color: var(--fg3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eye .eye-num { color: var(--accent); font-weight: 700; }
.eye .eye-rule { width: 28px; height: 1px; background: var(--border); display: inline-block; }

/* Hairlines */
.rule { height: 1px; background: var(--border); border: 0; }

/* Reveal — JS opts off-screen elements into .is-pending (opacity 0),
   then IO removes it when they intersect. Default state is visible so
   screenshots / no-JS / above-the-fold all show content immediately. */
.reveal {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-pending {
  opacity: 0;
  transform: translateY(20px);
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-pending { opacity: 1; transform: none; }
}

/* Custom cursor */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
  will-change: transform;
}
.cursor.is-hover {
  width: 44px; height: 44px;
  background: var(--accent);
  mix-blend-mode: normal;
  opacity: 0.4;
}
@media (max-width: 720px), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none; }
}