/* tokens.css — the whole design in one file.
 * Replicated from: https://www.rejouice.com/
 * Captured: 2026-10-07T23:34:08.080Z
 *
 * Change a value here and it propagates across every section.
 * Swap the font: edit --font-display / --font-body.
 * Swap the palette: edit --c-*. Dial the motion: edit --motion-scale.
 */
:root {
  /* colour */
  --c-bg: #ffffff; /* 1086 uses */
  --c-text: #000000; /* 808 uses */
  --c-surface: #8f8f8f; /* 24 uses */
  --c-surface-2: #f7f7f7; /* 8 uses */
  --c-text-2: #101010; /* 1 uses */
  --c-surface-3: rgba(255, 255, 255, 0.14); /* 1 uses */

  /* type */
  --font-display: "DM Sans", Arial, sans-serif;
  --font-body: var(--font-display);

  /* Paak typography: compact copy here; display composition in each page owner. */
  --paak-leading-statement: 1.08;
  --paak-leading-heading: 1.1;
  --paak-leading-body: 1.2;
  --paak-type-small: clamp(14px, 0.93vw, 16px);
  --paak-leading-small: 1.5;
  --paak-tracking-statement: -0.035em;
  --paak-tracking-heading: -0.03em;
  --paak-tracking-body: -0.04em;

  /* type scale */
  --text-1: 10px; /* 1 uses */
  --text-2: 14px; /* 63 uses */
  --text-3: 16px; /* 134 uses */
  --text-4: 20px; /* 376 uses */
  --text-5: 40px; /* 1 uses */
  --text-6: 50px; /* 2 uses */
  --text-7: 61.83px; /* 58 uses */

  /* spacing */
  --space-1: 2px; /* 1 uses */
  --space-2: 5px; /* 13 uses */
  --space-3: 6px; /* 1 uses */
  --space-4: 7px; /* 2 uses */
  --space-5: 8px; /* 1 uses */
  --space-6: 10px; /* 7 uses */
  --space-7: 20px; /* 7 uses */
  --space-8: 23.75px; /* 4 uses */
  --space-9: 36.95px; /* 40 uses */
  --space-10: 50.67px; /* 3 uses */
  --space-11: 60px; /* 2 uses */
  --space-12: 69.5px; /* 2 uses */
  --space-13: 79px; /* 1 uses */
  --space-14: 103px; /* 2 uses */
  --space-15: 119px; /* 1 uses */
  --space-16: 220px; /* 3 uses */

  /* radius */
  --radius-1: 6px;

  /* motion */
  --motion-scale: 1;
  --paak-type-copy: clamp(16px, calc(15.415px + 0.15vw), 18px);
  --paak-type-body: var(--paak-type-copy-medium);
  --paak-type-label: var(--paak-type-copy);
  --paak-type-reading: var(--paak-type-copy-medium);
  --paak-leading-reading: 1.65;
  --paak-tracking-reading: -0.018em;
  --paak-type-project-label: var(--paak-type-small);
  --paak-type-copy-medium: clamp(20px, calc(18.791px + 0.31vw), 24px);
  --paak-type-copy-large: clamp(24px, calc(22.206px + 0.46vw), 30px);
  --paak-type-conversation: var(--paak-type-copy-large);
  --paak-leading-emphasis: 1.1;
  --paak-tracking-emphasis: -0.05em;
}

/* Shared design contract: current 1512 desktop composition is the anchor. */
:root {
  --scale: clamp(1, 100vw / 1512px, 2560 / 1512);
  --paak-unit-390: 10.4013px;
  --paak-unit-1512: 10px;
  --paak-type-statement-390: 30px;
  --paak-type-statement-1512: 64px;
  --paak-type-section-390: 26px;
  --paak-type-section-1512: 38.3224px;
  --paak-type-feature-390: 28px;
  --paak-type-feature-1512: 38.3224px;
  --paak-type-heading-390: 20px;
  --paak-type-heading-1512: 24px;
  --paak-type-caption-390: 20px;
  --paak-type-caption-1512: 23.4782px;
}
@media (width < 1512px) {
  :root {
    --paak-unit: clamp(
      min(var(--paak-unit-390), var(--paak-unit-1512)),
      calc(
        var(--paak-unit-390) + (var(--paak-unit-1512) - var(--paak-unit-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-unit-390), var(--paak-unit-1512))
    );
    --paak-type-statement: clamp(
      min(var(--paak-type-statement-390), var(--paak-type-statement-1512)),
      calc(
        var(--paak-type-statement-390) +
          (var(--paak-type-statement-1512) - var(--paak-type-statement-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-statement-390), var(--paak-type-statement-1512))
    );
    --paak-type-section: clamp(
      min(var(--paak-type-section-390), var(--paak-type-section-1512)),
      calc(
        var(--paak-type-section-390) +
          (var(--paak-type-section-1512) - var(--paak-type-section-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-section-390), var(--paak-type-section-1512))
    );
    --paak-type-feature: clamp(
      min(var(--paak-type-feature-390), var(--paak-type-feature-1512)),
      calc(
        var(--paak-type-feature-390) +
          (var(--paak-type-feature-1512) - var(--paak-type-feature-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-feature-390), var(--paak-type-feature-1512))
    );
    --paak-type-heading: clamp(
      min(var(--paak-type-heading-390), var(--paak-type-heading-1512)),
      calc(
        var(--paak-type-heading-390) +
          (var(--paak-type-heading-1512) - var(--paak-type-heading-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-heading-390), var(--paak-type-heading-1512))
    );
    --paak-type-caption: clamp(
      min(var(--paak-type-caption-390), var(--paak-type-caption-1512)),
      calc(
        var(--paak-type-caption-390) +
          (var(--paak-type-caption-1512) - var(--paak-type-caption-390)) *
          (100vw - 390px) / (1512px - 390px)
      ),
      max(var(--paak-type-caption-390), var(--paak-type-caption-1512))
    );
  }
}
@media (width >= 1512px) {
  :root {
    --paak-unit: calc(var(--paak-unit-1512) * var(--scale));
    --paak-type-statement: calc(var(--paak-type-statement-1512) * var(--scale));
    --paak-type-section: calc(var(--paak-type-section-1512) * var(--scale));
    --paak-type-feature: calc(var(--paak-type-feature-1512) * var(--scale));
    --paak-type-heading: calc(var(--paak-type-heading-1512) * var(--scale));
    --paak-type-caption: calc(var(--paak-type-caption-1512) * var(--scale));
  }
}
/* Compact copy scales independently of display headings and page geometry. */
@media (width >= 1024px) {
  :root {
    --paak-project-label-progress: calc((100vw - 1512px) / 1048px);
    --paak-type-project-label: clamp(
      15px,
      calc(16px + 2px * var(--paak-project-label-progress)),
      18px
    );
  }
}
@media (width >= 1651px) {
  :root {
    --paak-type-project-label: calc(16.26526718px * (100vw / 1651px));
  }
}
@media (width >= 2000px) {
  :root {
    --paak-type-copy: 0.9vw;
    --paak-type-small: 0.8vw;
    --paak-type-copy-medium: 1.2vw;
    --paak-type-copy-large: 1.5vw;
  }
}
/* FAQ and form conversations use the medium role on Paak's phone layout. */
@media (width < 768px) {
  :root {
    --paak-type-conversation: var(--paak-type-copy-medium);
  }
}