:root {
  /* spacing */
  --xxs: 0.25rem;
  --xs: 0.5rem;
  --sm: 1rem;
  --md: 1.5rem;
  --lg: 2rem;
  --xl: 3rem;
  --xxl: 4rem;
  --section-space: clamp(4rem, 10vw, 8rem);
  --gutter: clamp(1rem, 4vw, 3rem);

  --header-height: 4.5rem;

  /* layout */
  --container: 1200px;
  --container-narrow: 760px;

  /* colors */
  --primary: #ff6b6b;
  --primary-strong: #ff8787;
  --success: #51cf66;
  --danger: #ff6b6b;
  --light: #f8f9fa;
  --muted: rgba(248, 249, 250, 0.68);
  --subtle: rgba(248, 249, 250, 0.45);
  --line: rgba(248, 249, 250, 0.14);
  --line-strong: rgba(248, 249, 250, 0.32);
  --dark: rgb(16, 17, 18);
  --surface: rgba(20, 21, 24, 0.72);
  --surface-solid: #16171a;
  --dark-transparent: rgba(0, 0, 0, 0.55);
  --black: #000;

  /* typography */
  --font-display: "Poiret One", "Avenir Next", "Futura", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h1: clamp(2.25rem, 5vw, 3.5rem);
  --font-size-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-size-h3: 1.375rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height-base: 1.65;
  --line-height-tight: 1.15;

  /* border radius */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-pill: 999px;

  /* z-index */
  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-popover: 1060;

  /* transition */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 0.25s;

  /* shadows */
  --shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 1.25rem 3rem rgba(0, 0, 0, 0.5);
}