/* Matches RollColor and RollFont in Shared/Apple/UI/DesignSystem. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --ink: #F8FAFE;
  --sky: #DEEEFF;
  --deep: #0B0E14;
  --surface: #FFFFFF;
  --surface-elevated: #F0F4F9;
  --text: #111826;
  --dim: #5C6472;
  --faint: #5C6472;
  --border: #E3E6ED;
  --border-strong: #9299A4;
  --line: var(--border);
  --accent: #3B5BDB;
  --accent-text: #2F4CC4;
  --accent-hover: #2F4CC4;
  --accent-tint: #3B5BDB29;
  --fill: var(--accent);
  --on-fill: #FFFFFF;
  --secondary: #E4EAF3;
  --on-secondary: var(--text);
  --secondary-ink: var(--accent-text);
  --danger: #C2502A;
  --live: #FFE08A;
  --on-live: #2A1406;
  --shadow: #1118260D;
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #0B0E14;
    --sky: #152035;
    --surface: #151A21;
    --surface-elevated: #191E27;
    --text: #F0F4FA;
    --dim: #A7AEBB;
    --faint: #A7AEBB;
    --border: #232831;
    --border-strong: #666C78;
    --accent: #7B97FF;
    --accent-text: #9DB2FF;
    --accent-hover: #9DB2FF;
    --accent-tint: #7B97FF29;
    --on-fill: #0A1238;
    --secondary: #1F242E;
    --danger: #F59C7E;
    --live: #F4CE75;
    --shadow: #00000026;
  }
}
body {
  background: linear-gradient(180deg, var(--sky), var(--ink) min(65svh, 540px)) fixed;
}
.wordmark picture { display: block; line-height: 0; }
::selection { color: var(--on-fill); background: var(--accent); }