/* ============== TOKENS ============== */
  :root {
    --c-green: #00bf63;
    --c-green-dark: #009e4e;
    --c-green-light: #e6f9ef;
    --c-anthracite: #3a3a3a;
    --c-anthracite-dark: #1f1f1f;
    --c-anthracite-darker: #161616;
    --c-anthracite-light: #5c5c5c;
    --c-black: #000;
    --c-white: #fff;
    --c-gray-50: #fafaf7;
    --c-gray-100: #f5f5f5;
    --c-gray-200: #e5e5e5;
    --c-gray-300: #cccccc;
    --c-gray-500: #8a8a8a;
    --c-red-warn: #d93025;
    --c-red-light: #fdecea;

    --ff: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

    --fs-display: 64px;
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-overline: 14px;
    --fs-body-lg: 20px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-micro: 12px;

    --lh-display: 1.1;
    --lh-heading: 1.2;
    --lh-body: 1.6;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px;
    --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

    --max-w: 1200px;
    --max-w-text: 720px;
    --pad-side: 48px;
    --header-h: 80px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --sh-sm: 0 2px 8px rgba(0,0,0,0.06);
    --sh-md: 0 4px 16px rgba(0,0,0,0.10);
    --sh-focus: 0 0 0 3px rgba(0,191,99,0.5);

    --t-fast: 150ms ease-out;
    --t-default: 200ms ease-out;
    --t-slow: 300ms ease-out;
  }
  @media (max-width: 767px) {
    :root {
      --fs-display: 40px;
      --fs-h1: 32px;
      --fs-h2: 26px;
      --fs-h3: 20px;
      --fs-h4: 18px;
      --fs-body-lg: 18px;
      --pad-side: 16px;
      --header-h: 64px;
    }
  }
  @media (min-width:768px) and (max-width:1023px) { :root { --pad-side: 32px; } }