/* ============================================================
   Design tokens — Gino Caiafa portfolio
   Extracted from Figma (Portfolio web / fileKey VZrMaoqZRSPHdZWulME2mr)
   ============================================================ */

:root {
  /* Brand */
  --white: #F3F3F3;
  --dark-grey: #292932;
  --blueish-gray: #1B1F26;
  --muted-gray: #6E7178;
  --primary-blue: #143083;
  --highlight-blue: #1F3DD8;          /* fails AA on light bg — user accepted */
  --separator-gray: rgba(10, 14, 19, 0.1412);

  /* Backgrounds */
  --bg-blue-radial-start: #223282;
  --bg-blue-radial-end:   #152055;

  /* Borders */
  --border-subtle-on-dark:  rgba(227, 227, 227, 0.20);
  --border-subtle-on-light: rgba(41, 41, 50, 0.18);

  /* Opacities */
  --opacity-inactive: 0.6;

  /* Radii */
  --radius-button: 30px;
  --radius-card: 12px;
  --radius-tag: 4px;

  /* Layout */
  --container-px: 60px;
  --section-py: 80px;
  --header-h: 80px;
  --max-w: 1440px;          /* content frame cap (includes side gutters) */
  /* Gutter-aligned padding for full-bleed bars (header/footer/etc):
     bar spans the viewport, but its content lines up with the centered
     1440 content frame. Resolves to --container-px below the breakpoint. */
  --bleed-pad: max(var(--container-px), calc((100% - var(--max-w)) / 2 + var(--container-px)));

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);

  /* Page transition timing */
  --page-out: 360ms;
  --page-in: 520ms;
  --bg-shift: 700ms;
}

@media (max-width: 1024px) {
  :root { --container-px: 40px; --section-py: 80px; }
}
@media (max-width: 640px) {
  :root { --container-px: 40px; --section-py: 64px; --header-h: 64px; }
}
@media (max-width: 420px) {
  :root { --container-px: 18px; --section-py: 52px; }
}