/* 00-tokens.css: Codapress palette, type scale, spacing. First stylesheet. */
:root {
      /* Codapress Palette Tokens */
      --color-bg: #000000;
      --color-text: #ffffff;
      --color-mid-grey: #8F8F8F;
      --color-muted: #333333;
      --color-border: #222222;
      --color-btn: #333333;
      --color-link-hover: #ffffff;
      --cursor-hover-color: #8F8F8F;

      /* Typography */
      --font-mono: "IBM Plex Mono", "Courier New", monospace;
      --font-nav: "IBM Plex Mono", "Courier New", monospace;

      /* Fluid Typography Scale */
      --text-xs: clamp(12px, 0.728vw, 24px);
      --text-sm: clamp(13px, 0.86vw, 28px);
      --text-base: clamp(14px, 0.95vw, 30px);
      --text-md: clamp(16px, 1.05vw, 36px);
      --text-lg: clamp(18px, 1.19vw, 42px);
      --text-xl: clamp(20px, 1.32vw, 48px);
      --text-2xl: clamp(24px, 1.58vw, 56px);
      --h1-size: clamp(2.5rem, 5.5vw, 130px);
      --h2-size: clamp(1.6rem, 2.8vw, 72px);

      /* Spacing */
      --spacing-xs: clamp(8px, 0.66vw, 20px);
      --spacing-s: clamp(16px, 1.32vw, 40px);
      --spacing-m: clamp(20px, 1.98vw, 60px);
      --spacing-l: clamp(24px, 2.64vw, 80px);
      --spacing-xl: clamp(32px, 3.3vw, 100px);
      --spacing-2xl: clamp(48px, 4.96vw, 140px);

      --gutter: clamp(24px, 3.3vw, 120px);
      --btn-padding-block: clamp(12px, 0.99vw, 32px);
      --btn-padding-inline: clamp(20px, 1.65vw, 50px);
    }