/* Beneficialmedia portfolio design system v1.0.0. Source: https://www.beneficialmedia.com/brand */

:root {
  --font-display: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
  --text-display: clamp(2.75rem, 6vw + 1rem, 6rem);
  --radius-card: 14px;
  --radius-tile: 6px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

:root {
  --bg: #fafaf9;
  --bg-elevated: #ffffff;
  --fg: #0a0a0a;
  --fg-muted: #525252;
  --border: #e5e5e5;
  --accent-home: #0a0a0a;
  --accent-work: #3a3d98;
  --accent-writing: #0f766e;
  --accent-about: #c01a30;
  --accent-brand: #b65825;
  --accent-fg: #ffffff;
}

.dark {
  --bg: #0a0a0a;
  --bg-elevated: #161616;
  --fg: #fafafa;
  --fg-muted: #a3a3a3;
  --border: #262626;
  --accent-home: #fafafa;
  --accent-work: #818cf8;
  --accent-writing: #5eead4;
  --accent-about: #f87171;
  --accent-brand: #d7733c;
  --accent-fg: #0a0a0a;
}