/* Design tokens — source of truth for Figma variable sync (personal-website) */

@import url('fonts-stack-sans.css');

:root {
  /* Color — semantic */
  --color-cream: #F8F8F8;
  --color-ink: #111111;
  --color-ink-soft: #3D3D3D;
  --color-ink-muted: #888888;
  --color-accent: #111111;
  --color-accent-soft: #E8E8E8;
  --color-line: rgba(17, 17, 17, 0.11);

  /* Typography — Stack Sans family (chosen) + DM Mono */
  --font-stack-notch: 'Stack Sans Notch', system-ui, sans-serif;
  --font-stack-headline: 'Stack Sans Headline', system-ui, sans-serif;
  --font-stack-text: 'Stack Sans Text', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* Semantic aliases — map roles to Stack Sans cuts */
  --font-display: var(--font-stack-notch);
  /* --font-display: 'Cormorant Garamond', Georgia, serif; */

  /* Typography — scale (px) */
  --font-size-body: 13px;
  --font-size-label: 11px;
  --font-size-label-sm: 10px;
  --font-size-label-xs: 9px;
  --font-size-nav: 18px;
  --font-size-hero: clamp(80px, 12vw, 180px);
  --font-size-hero-sub: clamp(40px, 6vw, 90px);

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Spacing (px) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 28px;
  --space-5: 32px;
  --space-6: 36px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 120px;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 48px;
}