/* Monty Marsh design tokens, generated from the design system's tokens.json.
   Darkroom is the default room. Put data-room="gallery" on a Gallery section to switch its values.
   Switch rooms between sections, never inside one. */

:root,
[data-room="darkroom"] {
  --ground: #1A0A0F;
  --surface: #241318;
  --surface-raised: #2F1A22;
  --well: #1C1C28;
  --hairline: #3A2029;
  --border-strong: #46262F;
  --control-line: #76626B;
  --ink: #F6E6EA;
  --ink-soft: #C9B6BC;
  --ink-mute: #9A8891;
  --voice: #8A2A3D;
  --voice-hover: #A23A4F;
  --voice-on: #F6E6EA;
  --voice-line: #B4485E;
  --gold: #C9962A;
  --gold-hover: #D9AB45;
  --gold-on: #1A0A0F;
  --gold-tint: #2E2210;
  --link: #C9962A;
  --focus: #C9962A;
  --scrim: rgba(26,10,15,0.72);
  --guapy-cyan: #1EC1CB;
  --guapy-ground: #1A0A0F;
  --guapy-ink: #F6E6EA;
  --guapy-ink-soft: #C9B6BC;
  --glow-voice: 0 8px 22px rgba(138,42,61,0.38);
  --glow-voice-hover: 0 10px 26px rgba(138,42,61,0.52);
  --depth: 0 14px 34px rgba(0,0,0,0.35);
  color-scheme: dark;
}

[data-room="gallery"] {
  --ground: #FAF6F2;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --well: #F1EAE4;
  --hairline: #E7DED6;
  --border-strong: #D6C8BE;
  --control-line: #8C7B82;
  --ink: #1C1C28;
  --ink-soft: #5B4A50;
  --ink-mute: #76666C;
  --voice: #8A2A3D;
  --voice-hover: #A23A4F;
  --voice-on: #FAF6F2;
  --voice-line: #8A2A3D;
  --gold: #8A6414;
  --gold-hover: #74540F;
  --gold-on: #FAF6F2;
  --gold-tint: #F3E9D2;
  --link: #8A2A3D;
  --focus: #8A6414;
  --scrim: rgba(26,10,15,0.72);
  --guapy-cyan: #1EC1CB;
  --guapy-ground: #1A0A0F;
  --guapy-ink: #F6E6EA;
  --guapy-ink-soft: #C9B6BC;
  --glow-voice: 0 8px 22px rgba(138,42,61,0.38);
  --glow-voice-hover: 0 10px 26px rgba(138,42,61,0.52);
  --depth: 0 14px 34px rgba(26,10,15,0.14);
  color-scheme: light;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-round: 999px;
  --font-display: "Syne", "Arial Black", sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;
}

/* Type styles. Set every number in Syne with lining figures, after any font shorthand. */
.t-name-xl { font: 800 60px / 60px var(--font-display); text-transform: uppercase; font-variant-numeric: lining-nums; }
.t-display-xl { font: 700 52px / 58px var(--font-display); font-variant-numeric: lining-nums; }
.t-display-l { font: 700 36px / 44px var(--font-display); font-variant-numeric: lining-nums; }
.t-display-m { font: 700 24px / 32px var(--font-display); font-variant-numeric: lining-nums; }
.t-overline { font: 700 12px / 16px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.t-subtitle { font: 500 34px / 44px var(--font-body); }
.t-lede { font: 400 21px / 33px var(--font-body); }
.t-body-l { font: 400 18px / 30px var(--font-body); }
.t-body { font: 400 16px / 26px var(--font-body); }
.t-label { font: 600 14px / 20px var(--font-body); }
.t-caption { font: 400 13px / 20px var(--font-body); }

@media (max-width: 767px) {
  .t-name-xl { font-size: 40px; line-height: 44px; }
  .t-display-xl { font-size: 36px; line-height: 42px; }
  .t-subtitle { font-size: 21px; line-height: 28px; }
}