/* Generated by tools/brand/build_brand_book.py from docs/brand/brand.json. Do not edit. */
/* Usage: <html data-mode="midnight|mist|paper">; paper is the default. */
[data-mode="midnight"] {
  --ground: #151930;
  --deep: #0D1020;
  --surface-1: #20263F;
  --surface-2: #2A3052;
  --surface-3: #343B5E;
  --line: #343B5E;
  --dot: #232A4A;
  --ink: #EEF1FA;
  --ink-2: #A3AACB;
  --ink-3: #8890B1;
  --signal: #A7B1FF;
  --accent: #FF6B35;
  --accent-ink: #FF6B35;
  --on-accent: #151930;
  --glass: rgba(32, 38, 63, 0.72);
  --shadow: #04050E;
}
[data-mode="mist"] {
  --ground: #E4E2EF;
  --deep: #D8D5E5;
  --surface-1: #F7F5FB;
  --surface-2: #FFFFFF;
  --surface-3: #EEEDF6;
  --line: #C4C1D9;
  --dot: #C4C1D9;
  --ink: #12152A;
  --ink-2: #404660;
  --ink-3: #5A6180;
  --signal: #4A54D6;
  --accent: #D9430E;
  --accent-ink: #B53700;
  --on-accent: #FFFFFF;
  --glass: rgba(247, 245, 251, 0.78);
  --shadow: #1A1F36;
}
:root, [data-mode="paper"] {
  --ground: #FBFAF6;
  --deep: #EFF0F4;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F5F5F8;
  --line: #DAD8E6;
  --dot: #DAD8E6;
  --ink: #12152A;
  --ink-2: #404660;
  --ink-3: #5A6180;
  --signal: #4A54D6;
  --accent: #D9430E;
  --accent-ink: #B53700;
  --on-accent: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.78);
  --shadow: #1A1F36;
}
:root {
  --ember-50: #FFF2EE;
  --ember-100: #FFE0D7;
  --ember-200: #FFC0AC;
  --ember-300: #FF9878;
  --ember-400: #FF6B35;
  --ember-500: #D9430E;
  --ember-600: #B53700;
  --ember-700: #872700;
  --ember-800: #5C1800;
  --ember-900: #3C0C00;
  --ember-950: #260500;
  --signal-50: #F2F5FF;
  --signal-100: #E1E7FF;
  --signal-200: #C4CEFF;
  --signal-300: #A7B1FF;
  --signal-400: #8795F4;
  --signal-500: #6974DC;
  --signal-600: #4A54D6;
  --signal-700: #3A3E9D;
  --signal-800: #252572;
  --signal-900: #15144F;
  --signal-950: #0B0934;
  --midnight-50: #F2F5FE;
  --midnight-100: #E4E7F4;
  --midnight-200: #CCD0E2;
  --midnight-300: #B0B6CD;
  --midnight-400: #969DB7;
  --midnight-500: #787F9B;
  --midnight-600: #616783;
  --midnight-700: #464C65;
  --midnight-800: #2D3246;
  --midnight-900: #151930;
  --midnight-950: #0D1020;
  --brand-gradient: linear-gradient(90deg, #F57F66 0%, #D99A9C 35%, #C7AFC0 65%, #A9CDF1 100%);
  --iridescence: conic-gradient(#A7B1FF, #8FE3D0, #F6B4C8, #FF8A5C, #A7B1FF);
  /* category colours: the app's default theme preset; themes and users change them, so never hard-code */
  --cat-source: #4ADE80;
  --cat-3d: #38BDF8;
  --cat-compositing: #818CF8;
  --cat-effects: #FACC15;
  --cat-modulators: #A3E635;
  --cat-prediction: #22D388;
  --cat-macros: #FC963C;
  --cat-utility: #A3A9BA;
  --cat-notes: #4CD964;
  --cat-synths: #6992F6;
  --cat-audioeffects: #53C7E3;
  --type-display: 800 clamp(2.5rem, 1.268rem + 5.258vw, 6rem)/0.98 Geist, system-ui, sans-serif;
  --track-display: -0.04em;
  --type-h1: 750 clamp(2rem, 1.362rem + 2.723vw, 3.812rem)/1.04 Geist, system-ui, sans-serif;
  --track-h1: -0.035em;
  --type-h2: 700 clamp(1.562rem, 1.254rem + 1.315vw, 2.438rem)/1.1 Geist, system-ui, sans-serif;
  --track-h2: -0.025em;
  --type-h3: 650 clamp(1.25rem, 1.14rem + 0.4695vw, 1.562rem)/1.2 Geist, system-ui, sans-serif;
  --track-h3: -0.015em;
  --type-lead: 450 clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem)/1.45 Geist, system-ui, sans-serif;
  --track-lead: -0.005em;
  --type-body: 400 1rem/1.55 Geist, system-ui, sans-serif;
  --track-body: 0em;
  --type-caption: 500 0.8438rem/1.45 Geist, system-ui, sans-serif;
  --track-caption: 0.005em;
  --type-micro-mono: 500 0.7188rem/1.35 'Geist Mono', ui-monospace, monospace;
  --track-micro-mono: 0.04em;
  --type-folio-mono-caps: 500 0.6875rem/1.2 'Geist Mono', ui-monospace, monospace;
  --track-folio-mono-caps: 0.12em;
  --radius-card: 24px;
  --radius-media: 16px;
  --radius-chip: 10px;
  --radius-control: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --spring-slab: linear(0, 0.017, 0.064, 0.133, 0.217, 0.311, 0.411, 0.511, 0.608, 0.699, 0.784, 0.859, 0.925, 0.98, 1.026, 1.062, 1.089, 1.108, 1.12, 1.126, 1.126, 1.122, 1.115, 1.105, 1.094, 1.082, 1.069, 1.056, 1.044, 1.033, 1.023, 1.014, 1.006, 1, 0.995, 0.991, 0.988, 0.986, 0.984, 0.984, 0.984, 0.985, 0.986, 0.987, 0.989, 0.99, 0.992, 0.994, 1);
  --spring-slab-ms: 462ms;  /* settles within 2% at 292ms */
  --spring-letter: linear(0, 0.017, 0.061, 0.127, 0.208, 0.297, 0.391, 0.485, 0.577, 0.664, 0.743, 0.815, 0.878, 0.932, 0.977, 1.014, 1.043, 1.065, 1.08, 1.089, 1.094, 1.095, 1.092, 1.087, 1.081, 1.073, 1.064, 1.055, 1.046, 1.038, 1.03, 1.022, 1.016, 1.01, 1.005, 1.001, 0.998, 0.995, 0.993, 0.992, 0.991, 0.991, 0.991, 0.991, 0.992, 0.993, 0.993, 0.994, 1);
  --spring-letter-ms: 414ms;  /* settles within 2% at 271ms */
  --spring-soft: linear(0, 0.006, 0.023, 0.048, 0.079, 0.116, 0.156, 0.199, 0.243, 0.288, 0.333, 0.377, 0.421, 0.463, 0.504, 0.543, 0.58, 0.615, 0.648, 0.679, 0.709, 0.736, 0.761, 0.784, 0.806, 0.826, 0.844, 0.861, 0.876, 0.89, 0.902, 0.914, 0.924, 0.933, 0.941, 0.949, 0.956, 0.962, 0.967, 0.972, 0.976, 0.979, 0.983, 0.986, 0.988, 0.99, 0.992, 0.994, 1);
  --spring-soft-ms: 305ms;  /* settles within 2% at 262ms */
  --spring-press: linear(0, 0.011, 0.039, 0.08, 0.128, 0.182, 0.238, 0.295, 0.351, 0.406, 0.458, 0.508, 0.554, 0.598, 0.638, 0.674, 0.708, 0.739, 0.767, 0.792, 0.815, 0.836, 0.854, 0.871, 0.885, 0.899, 0.91, 0.921, 0.93, 0.938, 0.946, 0.952, 0.958, 0.963, 0.968, 0.972, 0.975, 0.978, 0.981, 0.983, 0.985, 0.987, 0.989, 0.99, 0.991, 0.993, 0.993, 0.994, 1);
  --spring-press-ms: 266ms;  /* settles within 2% at 209ms */
  --dur-instant: 0ms;
  --dur-micro: 125ms;
  --dur-small: 188ms;
  --dur-medium: 333ms;
  --dur-large: 500ms;
  --dur-page: 667ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-micro: 0ms; --dur-small: 0ms; --dur-medium: 0ms; --dur-large: 0ms; --dur-page: 0ms; } }