/* Hard Tech Directory design tokens. */

:root {
  --graphite: #151816;
  --graphite-raised: #222724;
  --steel: #343b37;
  --paper: #e7eae6;
  --paper-sunk: #dce0dc;
  --surface: #f2f3f0;
  --surface-bright: #fafbf8;
  --ink: #171a18;
  --ink-soft: #626963;
  --ink-inverse: #f5f7f2;
  --accent: #b8f24a;
  --accent-deep: #487900;
  --accent-wash: #e8f7ca;
  --signal: #f06a35;
  --line: #c7cdc8;
  --line-dark: #454d48;
  --success: #2f7a58;
  --danger: #b3392b;

  --font-display: 'Inter', system-ui, sans-serif;
  --font-entity: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  --step--1: 0.78rem;
  --step-0: 0.98rem;
  --step-1: 1.2rem;
  --step-2: 1.75rem;
  --step-3: 2.65rem;
  --step-4: 4rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --measure: 68ch;
  --shell: 92rem;
  --page-gutter: var(--s-16);
  --site-nav-offset: 4.25rem;
}

@media (max-width: 54rem) {
  :root {
    --page-gutter: var(--s-8);
  }
}

@media (max-width: 48rem) {
  :root {
    --step-3: 2.1rem;
    --step-4: 2.85rem;
    --s-16: 3rem;
    --s-24: 4rem;
  }
}

@media (max-width: 42rem) {
  :root {
    --page-gutter: var(--s-4);
  }
}