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

:root {
  --bg:          #0c0a0b;
  --surface:     #141113;
  --surface-2:   #1e1a1d;
  --border:      #2e282c;
  --border-soft: #231f22;

  --text:        #ede0e4;
  --text-muted:  #9b8890;
  --text-faint:  #5c5258;

  --accent:      #c8496a;
  --accent-hi:   #e0607e;
  --accent-dim:  rgba(200, 73, 106, 0.12);
  --accent-line: rgba(200, 73, 106, 0.35);

  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   16px;

  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;

  --transition:      150ms ease;
  --transition-slow: 320ms cubic-bezier(.22,.68,0,1);

  /* layout */
  --header-h:   64px;
  --toc-w:      220px;
  --content-w:  760px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);

  --z-nav:      100;
  --z-particle: 9999;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; --transition-slow: 0ms; }
}