/* tokens.css — design system. Edit these to change the whole site. */
:root {
  /* ── Palette ── replace with your actual brand colours */
  --color-bg:       #ffffff;
  --color-surface:  #f5f4f1;
  --color-border:   #e2e0da;
  --color-text:     #161616;
  --color-muted:    #6b6a64;
  --color-accent:   #9a7b54;  /* warm sand — change to suit your work */

  /* ── Typography ── */
  --font-display: 'Georgia', serif;   /* swap to a Google Font if desired */
  --font-body:    system-ui, sans-serif;
  --font-mono:    'Courier New', monospace;

  --size-xs:   0.75rem;   /* 12px */
  --size-sm:   0.875rem;  /* 14px */
  --size-base: 1rem;      /* 16px */
  --size-lg:   1.25rem;   /* 20px */
  --size-xl:   1.75rem;   /* 28px */
  --size-2xl:  2.5rem;    /* 40px */
  --size-3xl:  4rem;      /* 64px */

  --leading-tight:  1.1;
  --leading-normal: 1.6;

  /* ── Spacing scale ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 8rem;

  /* ── Layout ── */
  --max-width: 1280px;
  --gutter:    1rem;   /* grows at wider viewports */

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --size-xl:  2.25rem;
    --size-2xl: 3.5rem;
    --size-3xl: 5.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 4rem;
  }
}