/**
 * Design tokens from Figma file "Portfolio"
 * https://www.figma.com/design/KIX8gCgWO5Zv2xJdtgzHxJ/Portfolio
 */

:root {
  /* Tinted neutral */
  --color-tinted-neutral-1: #ffffff;
  --color-tinted-neutral-2: #f1f2f3;
  --color-tinted-neutral-3: #c5cad2;
  --color-tinted-neutral-4: #9fa5af;
  --color-tinted-neutral-5: #666f7f;
  --color-tinted-neutral-6: #2e333b;

  /* Breakpoint: mobile-specific tweaks below 768px */
  --breakpoint-desktop: 768px;

  /* Layout */
  --layout-page-padding-x: 24px;
  --layout-content-max-width: 1000px;
  --layout-content-padding-y: 64px;
  --layout-section-gap: 64px;
  --layout-preview-title-gap: 12px;
  --layout-article-row-gap: 64px;
  --layout-rail-gap: 24px;

  /* Article grid: copy | rule | space to images | image rail */
  --grid-columns: 3;
  --grid-gutter: 64px;

  /* Components */
  --size-header-height: 25px;
  --size-header-height-mobile: 18.75px;
  --size-icon-button: 48px;
  --size-icon-glyph: 24px;
  --lightbox-margin: 24px;
  --lightbox-control-offset: 24px;
}

@media (max-width: 767px) {
  :root {
    --size-header-height: var(--size-header-height-mobile);
    --grid-gutter: 24px;
    --layout-content-padding-y: 24px;
    --layout-section-gap: 24px;
    --layout-article-row-gap: 24px;
    --layout-rail-gap: 16px;
  }
}