/* Generated from tokens.json by scripts/emit-tokens.py. Edit the JSON, not this file. */

:root {
  color-scheme: light;
  --so-ground: #ECEEF2;
  --so-ground-2: #DFE3EA;
  --so-surface: #F8F9FB;
  --so-frost: #FFFFFF8C;
  --so-frost-edge: #FFFFFFD9;
  --so-ink: #0A0D14;
  --so-ink-2: #2B303B;
  --so-muted: #5B6271;
  --so-faint: #959CA9;
  --so-line: #0A0D1417;
  --so-line-strong: #0A0D142E;
  --so-hover: #0A0D140A;
  --so-action: #0A0D14;
  --so-on-action: #F8F9FB;
  --so-field-dot: #1A1F2B;
  --so-signal: #4A6A9C;
  --so-success: #12805C;
  --so-warning: #A15C00;
  --so-danger: #C4283F;
  --so-shadow-float: 0 1px 2px #0A0D140D, 0 24px 60px -24px #1B2A5A40;
  --so-shadow-lift: 0 2px 6px #0A0D1414, 0 40px 90px -30px #1B2A5A59;
  --so-steel-base: #6F8FB8;
  --so-steel-ink: #516886;
  --so-steel-glow: #8CA5C6;
  --so-iris-base: #7F7DC4;
  --so-iris-ink: #636299;
  --so-iris-glow: #A09FD3;
  --so-heather-base: #9C7FB6;
  --so-heather-ink: #755F88;
  --so-heather-glow: #B29BC6;
  --so-rosewood-base: #B47F92;
  --so-rosewood-ink: #835D6B;
  --so-rosewood-glow: #C399A8;
  --so-bronze-base: #B38660;
  --so-bronze-ink: #816045;
  --so-bronze-glow: #C19D7E;
  --so-brass-base: #A89A5E;
  --so-brass-ink: #71673F;
  --so-brass-glow: #B1A46E;
  --so-verdigris-base: #5E9E94;
  --so-verdigris-ink: #426F68;
  --so-verdigris-glow: #78AEA5;
  --so-spectrum: linear-gradient(100deg, #6F8FB8, #7F7DC4, #9C7FB6, #B47F92, #B38660);
  /* The studio's own band. A venture overrides it with data-band. */
  --so-band-base: var(--so-steel-base);
  --so-band-ink: var(--so-steel-ink);
  --so-band-glow: var(--so-steel-glow);
  --so-font-display: "Funnel Display", "Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --so-font-text: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --so-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --so-type-hero-size: clamp(2.75rem, 1.4rem + 5.6vw, 6.25rem);
  --so-type-hero-weight: 300;
  --so-type-hero-strong: 700;
  --so-type-hero-tracking: -0.045em;
  --so-type-hero-leading: 0.96;
  --so-type-display-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --so-type-display-weight: 300;
  --so-type-display-strong: 700;
  --so-type-display-tracking: -0.04em;
  --so-type-display-leading: 1.0;
  --so-type-headline-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --so-type-headline-weight: 400;
  --so-type-headline-strong: 700;
  --so-type-headline-tracking: -0.03em;
  --so-type-headline-leading: 1.1;
  --so-type-title-size: 1.3125rem;
  --so-type-title-weight: 500;
  --so-type-title-tracking: -0.02em;
  --so-type-title-leading: 1.25;
  --so-type-lead-size: 1.1875rem;
  --so-type-lead-weight: 400;
  --so-type-lead-tracking: -0.01em;
  --so-type-lead-leading: 1.5;
  --so-type-body-size: 1rem;
  --so-type-body-weight: 400;
  --so-type-body-tracking: -0.005em;
  --so-type-body-leading: 1.6;
  --so-type-small-size: 0.875rem;
  --so-type-small-weight: 400;
  --so-type-small-tracking: 0em;
  --so-type-small-leading: 1.5;
  --so-type-label-size: 0.6875rem;
  --so-type-label-weight: 400;
  --so-type-label-tracking: 0.06em;
  --so-type-label-leading: 1.3;
  --so-type-matrix-size: clamp(4rem, 2rem + 9vw, 10rem);
  --so-type-matrix-weight: 700;
  --so-type-matrix-tracking: -0.02em;
  --so-type-matrix-leading: 0.9;
  --so-space-1: 4px;
  --so-space-2: 8px;
  --so-space-3: 12px;
  --so-space-4: 16px;
  --so-space-5: 24px;
  --so-space-6: 32px;
  --so-space-7: 48px;
  --so-space-8: 64px;
  --so-space-9: 96px;
  --so-space-10: 144px;
  --so-radius-tick: 3px;
  --so-radius-control: 8px;
  --so-radius-card: 14px;
  --so-radius-panel: 22px;
  --so-radius-round: 999px;
  --so-blur-frost: 22px;
  --so-motion-instant: 90ms;
  --so-motion-quick: 160ms;
  --so-motion-settle: 420ms;
  --so-motion-scene: 1200ms;
  --so-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --so-motion-ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --so-motion-field-follow: 0.075;
  --so-layout-max: 1240px;
  --so-layout-measure: 38rem;
  --so-layout-gutter: clamp(16px, 4vw, 48px);
  --so-layout-control: 44px;
}

/* Accent: band ink on Chrome. */
:root, [data-band], .so-deep, .so-chrome, .so-void {
  --so-accent: var(--so-band-ink);
  --so-on-accent: #FFFFFF;
}

/* A venture sets data-band on <html> (or any element) and takes that band as its accent. */
[data-band="steel"] { --so-band-base: var(--so-steel-base); --so-band-ink: var(--so-steel-ink); --so-band-glow: var(--so-steel-glow); }
[data-band="iris"] { --so-band-base: var(--so-iris-base); --so-band-ink: var(--so-iris-ink); --so-band-glow: var(--so-iris-glow); }
[data-band="heather"] { --so-band-base: var(--so-heather-base); --so-band-ink: var(--so-heather-ink); --so-band-glow: var(--so-heather-glow); }
[data-band="rosewood"] { --so-band-base: var(--so-rosewood-base); --so-band-ink: var(--so-rosewood-ink); --so-band-glow: var(--so-rosewood-glow); }
[data-band="bronze"] { --so-band-base: var(--so-bronze-base); --so-band-ink: var(--so-bronze-ink); --so-band-glow: var(--so-bronze-glow); }
[data-band="brass"] { --so-band-base: var(--so-brass-base); --so-band-ink: var(--so-brass-ink); --so-band-glow: var(--so-brass-glow); }
[data-band="verdigris"] { --so-band-base: var(--so-verdigris-base); --so-band-ink: var(--so-verdigris-ink); --so-band-glow: var(--so-verdigris-glow); }

/* Void: following the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
    --so-ground: #05070C;
    --so-ground-2: #0C1120;
    --so-surface: #10141E;
    --so-frost: #141A28A6;
    --so-frost-edge: #FFFFFF1F;
    --so-ink: #EDF0F5;
    --so-ink-2: #C3C8D2;
    --so-muted: #878E9C;
    --so-faint: #4E5462;
    --so-line: #FFFFFF14;
    --so-line-strong: #FFFFFF29;
    --so-hover: #FFFFFF0D;
    --so-action: #EDF0F5;
    --so-on-action: #05070C;
    --so-field-dot: #D5DBE6;
    --so-signal: #8CA5C6;
    --so-success: #4FD6A4;
    --so-warning: #FFC062;
    --so-danger: #FF7086;
    --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
    --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
  }
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-band] {
  --so-accent: var(--so-band-glow);
    --so-on-accent: #05070C;
  }
  :root:not([data-theme="light"]) .so-deep {
  color-scheme: dark;
    --so-ground: #060D2B;
    --so-ground-2: #0D1C52;
    --so-surface: #0E1A45;
    --so-frost: #12205AA6;
    --so-frost-edge: #FFFFFF24;
    --so-ink: #EEF1FA;
    --so-ink-2: #C6CDE6;
    --so-muted: #8E99C2;
    --so-faint: #56608A;
    --so-line: #FFFFFF17;
    --so-line-strong: #FFFFFF2E;
    --so-hover: #FFFFFF0F;
    --so-action: #EEF1FA;
    --so-on-action: #060D2B;
    --so-field-dot: #D2DAFF;
    --so-signal: #A9BCDA;
    --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
    --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
  }
}

/* Void: pinned. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --so-ground: #05070C;
  --so-ground-2: #0C1120;
  --so-surface: #10141E;
  --so-frost: #141A28A6;
  --so-frost-edge: #FFFFFF1F;
  --so-ink: #EDF0F5;
  --so-ink-2: #C3C8D2;
  --so-muted: #878E9C;
  --so-faint: #4E5462;
  --so-line: #FFFFFF14;
  --so-line-strong: #FFFFFF29;
  --so-hover: #FFFFFF0D;
  --so-action: #EDF0F5;
  --so-on-action: #05070C;
  --so-field-dot: #D5DBE6;
  --so-signal: #8CA5C6;
  --so-success: #4FD6A4;
  --so-warning: #FFC062;
  --so-danger: #FF7086;
  --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
  --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-band] {
  --so-accent: var(--so-band-glow);
  --so-on-accent: #05070C;
}
:root[data-theme="dark"] .so-deep {
  color-scheme: dark;
  --so-ground: #060D2B;
  --so-ground-2: #0D1C52;
  --so-surface: #0E1A45;
  --so-frost: #12205AA6;
  --so-frost-edge: #FFFFFF24;
  --so-ink: #EEF1FA;
  --so-ink-2: #C6CDE6;
  --so-muted: #8E99C2;
  --so-faint: #56608A;
  --so-line: #FFFFFF17;
  --so-line-strong: #FFFFFF2E;
  --so-hover: #FFFFFF0F;
  --so-action: #EEF1FA;
  --so-on-action: #060D2B;
  --so-field-dot: #D2DAFF;
  --so-signal: #A9BCDA;
  --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
  --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
}

/* A chapter that goes dark on purpose. On Chrome it is Void. */
.so-deep {
  color-scheme: dark;
  --so-ground: #05070C;
  --so-ground-2: #0E1426;
  --so-surface: #10141E;
  --so-frost: #141A28A6;
  --so-frost-edge: #FFFFFF1F;
  --so-ink: #EDF0F5;
  --so-ink-2: #C3C8D2;
  --so-muted: #878E9C;
  --so-faint: #4E5462;
  --so-line: #FFFFFF14;
  --so-line-strong: #FFFFFF29;
  --so-hover: #FFFFFF0D;
  --so-action: #EDF0F5;
  --so-on-action: #05070C;
  --so-field-dot: #D5DBE6;
  --so-signal: #8CA5C6;
  --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
  --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
}
.so-deep, .so-deep [data-band] {
  --so-accent: var(--so-band-glow);
  --so-on-accent: #05070C;
}

/* Force a light on one element. */
.so-chrome {
  color-scheme: light;
  --so-ground: #ECEEF2;
  --so-ground-2: #DFE3EA;
  --so-surface: #F8F9FB;
  --so-frost: #FFFFFF8C;
  --so-frost-edge: #FFFFFFD9;
  --so-ink: #0A0D14;
  --so-ink-2: #2B303B;
  --so-muted: #5B6271;
  --so-faint: #959CA9;
  --so-line: #0A0D1417;
  --so-line-strong: #0A0D142E;
  --so-hover: #0A0D140A;
  --so-action: #0A0D14;
  --so-on-action: #F8F9FB;
  --so-field-dot: #1A1F2B;
  --so-signal: #4A6A9C;
  --so-success: #12805C;
  --so-warning: #A15C00;
  --so-danger: #C4283F;
  --so-shadow-float: 0 1px 2px #0A0D140D, 0 24px 60px -24px #1B2A5A40;
  --so-shadow-lift: 0 2px 6px #0A0D1414, 0 40px 90px -30px #1B2A5A59;
}
.so-chrome, .so-chrome [data-band] {
  --so-accent: var(--so-band-ink);
  --so-on-accent: #FFFFFF;
}
.so-void {
  color-scheme: dark;
  --so-ground: #05070C;
  --so-ground-2: #0C1120;
  --so-surface: #10141E;
  --so-frost: #141A28A6;
  --so-frost-edge: #FFFFFF1F;
  --so-ink: #EDF0F5;
  --so-ink-2: #C3C8D2;
  --so-muted: #878E9C;
  --so-faint: #4E5462;
  --so-line: #FFFFFF14;
  --so-line-strong: #FFFFFF29;
  --so-hover: #FFFFFF0D;
  --so-action: #EDF0F5;
  --so-on-action: #05070C;
  --so-field-dot: #D5DBE6;
  --so-signal: #8CA5C6;
  --so-success: #4FD6A4;
  --so-warning: #FFC062;
  --so-danger: #FF7086;
  --so-shadow-float: 0 1px 2px #00000066, 0 24px 60px -24px #000000A6;
  --so-shadow-lift: 0 2px 6px #00000080, 0 40px 90px -30px #000000BF;
}
.so-void, .so-void [data-band] {
  --so-accent: var(--so-band-glow);
  --so-on-accent: #05070C;
}