/* Generated from brand/tokens/tokens.json by `npm run tokens`. Do not edit by hand. */

:root {
  --color-ink: #1E1915;
  --color-mud: #8A4B2F;
  --color-dune: #EFE3CF;
  --color-sadu: #A8262B;
  --color-dune-mist: #F8F3E9;
  --color-dune-dim: #B9B0A0;
  --color-mud-dusk: #41261B;
  --color-mud-lit: #E0B29F;
  --color-ink-raised: #2B2521;
  --color-sadu-lit: #ED756F;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", "Geeza Pro", "Tahoma", sans-serif;
  --font-latin: "IBM Plex Sans", "IBM Plex Sans Arabic", "Helvetica Neue", "Arial", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --type-latin-display-size: 3.81rem;
  --type-latin-display-line-height: 1.05;
  --type-latin-display-weight: 300;
  --type-latin-display-tracking: -0.076rem;
  --type-latin-h1-size: 2.44rem;
  --type-latin-h1-line-height: 1.1;
  --type-latin-h1-weight: 400;
  --type-latin-h1-tracking: -0.037rem;
  --type-latin-h2-size: 1.95rem;
  --type-latin-h2-line-height: 1.15;
  --type-latin-h2-weight: 500;
  --type-latin-h2-tracking: -0.02rem;
  --type-latin-h3-size: 1.56rem;
  --type-latin-h3-line-height: 1.25;
  --type-latin-h3-weight: 500;
  --type-latin-h3-tracking: 0rem;
  --type-latin-lead-size: 1.25rem;
  --type-latin-lead-line-height: 1.45;
  --type-latin-lead-weight: 400;
  --type-latin-lead-tracking: 0rem;
  --type-latin-body-size: 1rem;
  --type-latin-body-line-height: 1.55;
  --type-latin-body-weight: 400;
  --type-latin-body-tracking: 0rem;
  --type-latin-caption-size: 0.8rem;
  --type-latin-caption-line-height: 1.45;
  --type-latin-caption-weight: 500;
  --type-latin-caption-tracking: 0.016rem;
  --type-arabic-display-size: 4.29rem;
  --type-arabic-display-line-height: 1.35;
  --type-arabic-display-weight: 300;
  --type-arabic-display-tracking: 0rem;
  --type-arabic-h1-size: 2.75rem;
  --type-arabic-h1-line-height: 1.4;
  --type-arabic-h1-weight: 400;
  --type-arabic-h1-tracking: 0rem;
  --type-arabic-h2-size: 2.2rem;
  --type-arabic-h2-line-height: 1.45;
  --type-arabic-h2-weight: 500;
  --type-arabic-h2-tracking: 0rem;
  --type-arabic-h3-size: 1.76rem;
  --type-arabic-h3-line-height: 1.5;
  --type-arabic-h3-weight: 500;
  --type-arabic-h3-tracking: 0rem;
  --type-arabic-lead-size: 1.41rem;
  --type-arabic-lead-line-height: 1.75;
  --type-arabic-lead-weight: 400;
  --type-arabic-lead-tracking: 0rem;
  --type-arabic-body-size: 1.125rem;
  --type-arabic-body-line-height: 1.85;
  --type-arabic-body-weight: 400;
  --type-arabic-body-tracking: 0rem;
  --type-arabic-caption-size: 0.9rem;
  --type-arabic-caption-line-height: 1.75;
  --type-arabic-caption-weight: 500;
  --type-arabic-caption-tracking: 0rem;
  --font-text: var(--font-latin);
  --type-display-size: var(--type-latin-display-size);
  --type-display-line-height: var(--type-latin-display-line-height);
  --type-display-weight: var(--type-latin-display-weight);
  --type-display-tracking: var(--type-latin-display-tracking);
  --type-h1-size: var(--type-latin-h1-size);
  --type-h1-line-height: var(--type-latin-h1-line-height);
  --type-h1-weight: var(--type-latin-h1-weight);
  --type-h1-tracking: var(--type-latin-h1-tracking);
  --type-h2-size: var(--type-latin-h2-size);
  --type-h2-line-height: var(--type-latin-h2-line-height);
  --type-h2-weight: var(--type-latin-h2-weight);
  --type-h2-tracking: var(--type-latin-h2-tracking);
  --type-h3-size: var(--type-latin-h3-size);
  --type-h3-line-height: var(--type-latin-h3-line-height);
  --type-h3-weight: var(--type-latin-h3-weight);
  --type-h3-tracking: var(--type-latin-h3-tracking);
  --type-lead-size: var(--type-latin-lead-size);
  --type-lead-line-height: var(--type-latin-lead-line-height);
  --type-lead-weight: var(--type-latin-lead-weight);
  --type-lead-tracking: var(--type-latin-lead-tracking);
  --type-body-size: var(--type-latin-body-size);
  --type-body-line-height: var(--type-latin-body-line-height);
  --type-body-weight: var(--type-latin-body-weight);
  --type-body-tracking: var(--type-latin-body-tracking);
  --type-caption-size: var(--type-latin-caption-size);
  --type-caption-line-height: var(--type-latin-caption-line-height);
  --type-caption-weight: var(--type-latin-caption-weight);
  --type-caption-tracking: var(--type-latin-caption-tracking);
}

/* Arabic text gets the Arabic family and its own sizes and line heights. */

:lang(ar) {
  --font-text: var(--font-arabic);
  --type-display-size: var(--type-arabic-display-size);
  --type-display-line-height: var(--type-arabic-display-line-height);
  --type-display-weight: var(--type-arabic-display-weight);
  --type-display-tracking: var(--type-arabic-display-tracking);
  --type-h1-size: var(--type-arabic-h1-size);
  --type-h1-line-height: var(--type-arabic-h1-line-height);
  --type-h1-weight: var(--type-arabic-h1-weight);
  --type-h1-tracking: var(--type-arabic-h1-tracking);
  --type-h2-size: var(--type-arabic-h2-size);
  --type-h2-line-height: var(--type-arabic-h2-line-height);
  --type-h2-weight: var(--type-arabic-h2-weight);
  --type-h2-tracking: var(--type-arabic-h2-tracking);
  --type-h3-size: var(--type-arabic-h3-size);
  --type-h3-line-height: var(--type-arabic-h3-line-height);
  --type-h3-weight: var(--type-arabic-h3-weight);
  --type-h3-tracking: var(--type-arabic-h3-tracking);
  --type-lead-size: var(--type-arabic-lead-size);
  --type-lead-line-height: var(--type-arabic-lead-line-height);
  --type-lead-weight: var(--type-arabic-lead-weight);
  --type-lead-tracking: var(--type-arabic-lead-tracking);
  --type-body-size: var(--type-arabic-body-size);
  --type-body-line-height: var(--type-arabic-body-line-height);
  --type-body-weight: var(--type-arabic-body-weight);
  --type-body-tracking: var(--type-arabic-body-tracking);
  --type-caption-size: var(--type-arabic-caption-size);
  --type-caption-line-height: var(--type-arabic-caption-line-height);
  --type-caption-weight: var(--type-arabic-caption-weight);
  --type-caption-tracking: var(--type-arabic-caption-tracking);
}

/* Time-of-day phases: set data-phase on <html> (or any element). Noon is the default. */

:root,
[data-phase="noon"] {
  color-scheme: light;
  --color-background: var(--color-dune);
  --color-surface: var(--color-dune-mist);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-mud);
  --color-accent-text: var(--color-sadu);
  --color-accent: var(--color-sadu);
  --color-on-accent: var(--color-dune);
  --color-line: var(--color-dune-dim);
}

[data-phase="dawn"] {
  color-scheme: light;
  --color-background: var(--color-dune-mist);
  --color-surface: var(--color-dune);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-mud);
  --color-accent-text: var(--color-sadu);
  --color-accent: var(--color-sadu);
  --color-on-accent: var(--color-dune-mist);
  --color-line: var(--color-dune-dim);
}

[data-phase="dusk"] {
  color-scheme: dark;
  --color-background: var(--color-mud-dusk);
  --color-surface: var(--color-ink);
  --color-text: var(--color-dune);
  --color-text-muted: var(--color-mud-lit);
  --color-accent-text: var(--color-sadu-lit);
  --color-accent: var(--color-sadu);
  --color-on-accent: var(--color-dune);
  --color-line: var(--color-mud);
}

[data-phase="night"] {
  color-scheme: dark;
  --color-background: var(--color-ink);
  --color-surface: var(--color-ink-raised);
  --color-text: var(--color-dune);
  --color-text-muted: var(--color-dune-dim);
  --color-accent-text: var(--color-sadu-lit);
  --color-accent: var(--color-sadu);
  --color-on-accent: var(--color-dune);
  --color-line: var(--color-mud);
}