/* Astrothunder · Remotion narrative on the web
 * field #07110f · cream #eee9dc · terracotta #d54f2b
 * Instrument Serif / Instrument Sans / IBM Plex Mono
 */
:root {
  --field: #07110f;
  --field-2: #101a17;
  --cream: #eee9dc;
  --cream-dim: color-mix(in srgb, var(--cream) 86%, transparent);
  --cream-mute: color-mix(in srgb, var(--cream) 58%, transparent);
  --ink: #07110f;
  --ink-dim: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-mute: color-mix(in srgb, var(--ink) 56%, transparent);
  --terracotta: #d54f2b;
  --terracotta-lit: #e86640;
  --terracotta-ink: #a03b20;
  --sage: #6f8f7b;
  --sage-rule: #5e7a69;
  --gold: #a58a59;
  --gold-rule: #7c6843;
  --chart-d9: #193a34;
  --chart-d10: #8b3926;
  --focus: #d54f2b;
  --selection: #d54f2b;
  --selection-ink: #eee9dc;

  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-label: 0.75rem;
  --text-body: 1.125rem;
  --text-body-lg: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-question: clamp(1.5rem, 2.4vw, 2.25rem);
  --text-display-s: clamp(2.25rem, 6vw, 4.25rem);
  --text-display: clamp(2.85rem, 8vw, 7.25rem);
  --text-stat: clamp(3.25rem, 7vw, 6.5rem);
  --text-wordmark: clamp(3.25rem, 11vw, 8.5rem);

  --tracking-display: -0.035em;
  --tracking-label: 0.16em;
  --tracking-label-sm: 0.14em;
  --leading-display: 1.06;
  --leading-body: 1.45;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;
  --space-4xl: 6.5rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --page: 84rem;
  --measure: 38rem;
  --nav-bar: 4.5rem;
  --nav-height: calc(var(--nav-bar) + env(safe-area-inset-top, 0px));
  --rail-start: max(
    var(--gutter),
    env(safe-area-inset-left, 0px),
    calc((100vw - min(100vw, var(--page))) / 2 + var(--gutter))
  );
  --rail-end: max(
    var(--gutter),
    env(safe-area-inset-right, 0px),
    calc((100vw - min(100vw, var(--page))) / 2 + var(--gutter))
  );

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur: 180ms;
  --dur-enter: 700ms;

  --rule: 1px;
  --rule-thick: 2px;
  --rule-cta: 3px;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-skip: 600;

  --cream-1: color-mix(in srgb, var(--cream) 1.2%, transparent);
  --cream-2: color-mix(in srgb, var(--cream) 1.8%, transparent);
  --cream-6: color-mix(in srgb, var(--cream) 6%, transparent);
  --cream-10: color-mix(in srgb, var(--cream) 10%, transparent);
  --cream-12: color-mix(in srgb, var(--cream) 12%, transparent);
  --cream-13: color-mix(in srgb, var(--cream) 13%, transparent);
  --cream-14: color-mix(in srgb, var(--cream) 14%, transparent);
  --cream-22: color-mix(in srgb, var(--cream) 22%, transparent);
  --cream-24: color-mix(in srgb, var(--cream) 24%, transparent);
  --cream-28: color-mix(in srgb, var(--cream) 28%, transparent);
  --cream-32: color-mix(in srgb, var(--cream) 32%, transparent);
  --cream-92: color-mix(in srgb, var(--cream) 92%, transparent);
  --ink-1: color-mix(in srgb, var(--ink) 1.2%, transparent);
  --ink-2: color-mix(in srgb, var(--ink) 1.8%, transparent);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-16: color-mix(in srgb, var(--ink) 16%, transparent);
  --ink-24: color-mix(in srgb, var(--ink) 24%, transparent);
  --ink-28: color-mix(in srgb, var(--ink) 28%, transparent);
  --terracotta-9: color-mix(in srgb, var(--terracotta) 9%, transparent);
  --terracotta-14: color-mix(in srgb, var(--terracotta) 14%, transparent);
  --terracotta-18: color-mix(in srgb, var(--terracotta) 18%, transparent);
  --shadow-14: color-mix(in srgb, #000 14%, transparent);
  --shadow-18: color-mix(in srgb, #000 18%, transparent);
  --shadow-28: color-mix(in srgb, #000 28%, transparent);
  --field-2-72: color-mix(in srgb, var(--field-2) 72%, transparent);
  --field-10: color-mix(in srgb, var(--field) 10%, transparent);
  --field-12: color-mix(in srgb, var(--field) 12%, transparent);
  --field-22: color-mix(in srgb, var(--field) 22%, transparent);
  --field-74: color-mix(in srgb, var(--field) 74%, transparent);
  --field-76: color-mix(in srgb, var(--field) 76%, transparent);
  --field-77: color-mix(in srgb, var(--field) 77%, transparent);
  --field-78: color-mix(in srgb, var(--field) 78%, transparent);
  --field-96: color-mix(in srgb, var(--field) 96%, transparent);
  --field-98: color-mix(in srgb, var(--field) 98%, transparent);
}