@font-face {
  font-family: 'Berkeley Mono Trial';
  src: url('./assets/fonts/berkeleymonotrial-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors ── */
  --color-blue:          #3c46ff;
  --color-red:           #eb2a24;

  --color-bg:            #f5f5f2;
  --color-bg-light:      #fafaf7;
  --color-bg-white:      #fafafa;

  --color-border:        #e2e2e2;
  --color-border-mid:    #dcdcdc;
  --color-border-light:  #eeeeee;

  --color-text:          #000000;
  --color-text-secondary:#555555;
  --color-text-muted:    #bbbbbb;

  --color-blue-12:       rgba(60, 70, 255, 0.12);
  --color-blue-50:       rgba(60, 70, 255, 0.50);
  --color-black-25:      rgba(0, 0, 0, 0.25);
  --color-black-50:      rgba(0, 0, 0, 0.50);
  --color-white-25:      rgba(255, 255, 255, 0.25);
  --color-white-50:      rgba(255, 255, 255, 0.50);
  --color-glass-bg:      rgba(240, 240, 240, 0.94);
  --color-bg-alpha:      rgba(250, 250, 247, 0.50);

  /* ── Typography ── */
  --font-mono:  'Berkeley Mono Trial', 'Courier New', monospace;
  --font-sans:  'Space Grotesk', sans-serif;

  --text-2xs:   10.5px;
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   64px;
  --text-display: 73px;

  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.4;
  --leading-loose:  1.6;

  /* ── Spacing ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  --page-gutter:       118px;
  --page-max:          1512px;

  /* ── Component sizes ── */
  --nav-height:        57px;
  --hero-text-width:   484px;
  --hero-min-height:   800px;
  --hero-img-width:    43%;
  --card-height:       170px;

  /* ── Gutters ── */
  --cards-gutter:      40px;
  --cards-gap:         30px;

  /* ── Additional type ── */
  --text-hero:         46px;
  --text-label:        13.5px;
  --text-subhead:      21px;
  --leading-hero:      0.888;

  /* ── Section-specific ── */
  --shift-headline-max: 637px;
  --node-height:        77px;
  --diagram-size:       1054px;

  /* ── Additional radii ── */
  --radius-xs:         1.5px;

  /* ── Additional colors ── */
  --color-border-white: #fafafa;
  --color-rule:         rgba(0, 0, 0, 0.25);
  --rule-weight:        0.75px;

  /* ── Radii ── */
  --radius-sm:  9px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-inset-sm:
    inset 0px 1.5px 3px var(--color-white-50),
    inset 0px -1.5px 3px var(--color-black-25);
  --shadow-inset:
    inset 0px 2px 4px var(--color-white-50),
    inset 0px -2px 4px var(--color-black-25);
  --shadow-inset-rev:
    inset 0px -1.5px 3px var(--color-white-50),
    inset 0px 1.5px 3px var(--color-black-25);
}