/*
 * Lordaia brand tokens: DESIGN.md's front matter as CSS custom properties,
 * each named by its path (colors.primary is --colors-primary). DESIGN.md is
 * the source; tests/brand-tokens.test.mjs keeps this file equal to it. Pages
 * outside the React app link it: the privacy page and, by copy with this
 * repository's commit named, the lordaia.com site.
 */
:root {
  --colors-primary: #176b50;
  --colors-primary-deep: #0d543d;
  --colors-ink: #1b302c;
  --colors-muted-ink: #4d625c;
  --colors-atmosphere: #f2f8fa;
  --colors-canvas: #f7fbfc;
  --colors-paper: #ffffff;
  --colors-line: #dce9e7;
  --colors-soft-green: #e5f1dc;
  --colors-soft-blue: #d9f1f5;
  --colors-urgency: #705132;

  /* Display is the landing page's hero step, above the app's headline. */
  --typography-display-font-family:
    Manrope, Avenir Next, -apple-system, BlinkMacSystemFont, Segoe UI,
    sans-serif;
  --typography-display-font-size: clamp(40px, 5.2vw, 72px);
  --typography-display-font-weight: 700;
  --typography-display-line-height: 1.04;
  --typography-display-letter-spacing: -0.045em;
  --typography-headline-font-family:
    Manrope, Avenir Next, -apple-system, BlinkMacSystemFont, Segoe UI,
    sans-serif;
  --typography-headline-font-size: clamp(28px, 2.45vw, 37px);
  --typography-headline-font-weight: 700;
  --typography-headline-line-height: 1.16;
  --typography-headline-letter-spacing: -0.04em;
  --typography-body-font-family:
    Manrope, Avenir Next, -apple-system, BlinkMacSystemFont, Segoe UI,
    sans-serif;
  --typography-body-font-size: 15px;
  --typography-body-font-weight: 400;
  --typography-body-line-height: 1.5;

  --rounded-control: 11px;
  --rounded-card: 18px;
  --rounded-shell: 0px;
  --rounded-pill: 999px;

  --spacing-tight: 8px;
  --spacing-normal: 18px;
  --spacing-spacious: 26px;

  --components-button-primary-background-color: var(--colors-primary);
  --components-button-primary-text-color: var(--colors-paper);
  --components-button-primary-rounded: var(--rounded-control);
  --components-button-primary-padding: 11px 17px;
  --components-card-background-color: var(--colors-paper);
  --components-card-rounded: var(--rounded-card);
  --components-card-padding: 23px 26px;
}