/* Generated by scripts/build-tokens.py from sparkofchaos.com. Do not edit by hand. */
@font-face {
  font-family: "Exo 2";
  src: url("fonts/exo-2-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Bruno Ace SC";
  src: url("fonts/bruno-ace-sc-400.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}
:root {
  --soc-ink-950: #06070c;
  --soc-ink-900: #0b0e16;
  --soc-ink-800: #121724;
  --soc-ink-700: #1b2233;
  --soc-line: rgba(255, 255, 255, 0.09);
  --soc-shade: #000;
  --soc-text: #e9edf6;
  --soc-text-dim: #98a2b8;
  --soc-text-bright: #fff;
  --soc-spark-1: #0f4170;
  --soc-spark-2: #214846;
  --soc-spark-3: #a9c464;
  --soc-spark-4: #f8322b;
  --soc-spark-5: #f28c33;
  --soc-spark-6: #fac453;
  --soc-spark-7: #f4f3be;
  --soc-spark-gradient: linear-gradient(135deg, var(--soc-spark-1), var(--soc-spark-2), var(--soc-spark-3), var(--soc-spark-4), var(--soc-spark-5), var(--soc-spark-6), var(--soc-spark-7));
  --soc-bloom: radial-gradient(44rem 30rem at 50% 42%, color-mix(in srgb, var(--soc-spark-5) 26%, transparent), transparent 70%), radial-gradient(26rem 20rem at 38% 55%, color-mix(in srgb, var(--soc-spark-4) 18%, transparent), transparent 72%), radial-gradient(24rem 18rem at 62% 34%, color-mix(in srgb, var(--soc-spark-6) 20%, transparent), transparent 72%);
  --soc-accent: #f38f55;
  --soc-accent-2: #f0ba4c;
  --soc-kabonk-accent: #ff00ff;
  --soc-kabonk-accent-2: #a3e0fc;
  --soc-kabonk-bg: #14030f;
  --soc-fernweh-accent: #f0a45a;
  --soc-fernweh-accent-2: #7fb98a;
  --soc-fernweh-bg: #0b120e;
  --soc-dyneria-accent: #ffc334;
  --soc-dyneria-accent-2: #c2d24b;
  --soc-dyneria-bg: #0d1226;
  --soc-font-display: 'Bruno Ace SC', ui-serif, Georgia, serif;
  --soc-font-body: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --soc-step--1: clamp(.833rem, .79rem + .2vw, .938rem);
  --soc-step-0: clamp(1rem, .95rem + .25vw, 1.125rem);
  --soc-step-1: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --soc-step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --soc-step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --soc-step-4: clamp(2.75rem, 2rem + 3.75vw, 5.5rem);
  --soc-space-1: .25rem;
  --soc-space-2: .5rem;
  --soc-space-3: .75rem;
  --soc-space-4: 1rem;
  --soc-space-5: 1.5rem;
  --soc-space-6: 2rem;
  --soc-space-8: 3rem;
  --soc-space-10: 4rem;
  --soc-space-12: 6rem;
  --soc-radius-sm: 4px;
  --soc-radius: 8px;
  --soc-radius-lg: 16px;
  --soc-radius-pill: 999px;
  --soc-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  --soc-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
  --soc-glow: 0 0 32px color-mix(in srgb, var(--soc-accent) 45%, transparent);
  --soc-measure: 68ch;
  --soc-container: 72rem;
  --soc-container-narrow: 52rem;
  --soc-ease: cubic-bezier(.2, .6, .3, 1);
  --soc-dur: 200ms;
  --ux-black: var(--soc-ink-950);
  --ux-white: var(--soc-text-bright);
  --ux-canvas: var(--soc-ink-950);
  --ux-canvas-glow: rgba(242, 140, 51, 0.26);
  --ux-ink: var(--soc-text);
  --ux-muted: var(--soc-text-dim);
  --ux-accent: var(--soc-accent);
  --ux-surface: var(--soc-ink-800);
  --ux-surface-ink: var(--soc-text);
  --ux-font-display: 'Bruno Ace SC', ui-serif, Georgia, serif;
  --ux-font-body: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ux-radius-frame: var(--soc-radius-lg);
  --ux-shadow-frame: 0 0 0 1px var(--soc-line), var(--soc-shadow-lg);
  --ux-ease-out: cubic-bezier(.2, .6, .3, 1);
  --ux-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}
[data-theme=dark] {
  --ux-canvas: #030409;
  --ux-surface: var(--soc-ink-900);
  --ux-canvas-glow: rgba(242, 140, 51, 0.32);
}
/* Bruno Ace SC has one weight: never synthesise bold. */
html, body, h1, h2, h3 { font-synthesis-weight: none; }