/* Alexey Kolpakov — design system tokens.
   Source: Claude Design system "Alexey Kolpakov — Photographer Design System",
   export/_ds/alexey-kolpakov-design-system-*/tokens/ (brief: export/uploads/design-system_1.md).
   Fonts are self-hosted instead of Google Fonts; Bodoni Moda ships here in 400 only. */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bodonimoda-400-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400-latin.woff2) format('woff2')}

:root{
  /* neutral scale — no accent colours, ever */
  --gray-99:#F2F2F0;
  --gray-95:#EAEAE7;
  --gray-60:#C9C9C6;
  --gray-45:#8A8A86;
  --gray-12:#1F1F1F;
  --gray-04:#0A0A0A;
  --white:#FFFFFF;

  /* semantic */
  --color-bg:var(--gray-95);
  --color-bg-alt:var(--gray-99);
  --color-ink:var(--gray-04);
  --color-ink-soft:var(--gray-12);
  --color-paper-text:var(--white);
  --color-line:var(--gray-60);
  --color-muted:var(--gray-45);
  --surface-overlay-on-image:rgba(10,10,10,.35);
  --border-hairline:1px solid var(--color-line);

  /* type */
  --font-display:'Bodoni Moda',Didot,'Marcellus',Georgia,serif;
  --font-body:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --tracking-hero:.35em;
  --tracking-nav-desktop:.3em;
  --tracking-nav-mobile:.25em;
  --tracking-section:.15em;
  --tracking-body:.03em;
  --tracking-meta:.15em;
  --size-hero:48px;
  --size-nav-desktop:22px;
  --size-nav-mobile:15px;
  --size-section:32px;
  --size-body:16px;
  --size-meta:12px;
  --leading-display:1.5;
  --leading-body:1.6;
  --leading-tight:1.1;

  /* 8px spacing scale, square corners */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-6:48px;
  --space-8:64px;
  --space-12:96px;
  --radius-none:0;

  /* motion: slow and soft */
  --duration-medium:400ms;
  --duration-slow:550ms;
  --ease-editorial:cubic-bezier(0.22,1,0.36,1);
}

/* film grain over a photo: add the class to its frame */
.grain-overlay{position:relative}
.grain-overlay::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}