/* Self-hosted Latin variable fonts. Downloaded only when a theme uses them. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
}
/* Global design tokens. Blocks never select a theme by name. */
:root {
  color-scheme: light;
  --brand1: #6250EF;
  --brand2: #202039;
  --brand3: #f5f2ed;
  --brand4: #e8e4fa;
  --brand5: #69677b;
  --brand6: #4932a8;
  --brand7: #8a35ce;
  --surface: #ffffff;
  --surface-muted: #f5f5f6;
  --line: #dedbd6;
  --on-brand: #ffffff;
  --button-start: var(--brand1);
  --button-mid: color-mix(in srgb, var(--brand1) 55%, var(--brand7));
  --button-end: var(--brand7);
  --button-ink: #ffffff;
  --button-sheen: #ffffff;
  --button-highlight: color-mix(in srgb, var(--brand1) 75%, var(--brand4));
  --scrim: color-mix(in srgb, var(--brand2) 14%, transparent);
  --shadow: color-mix(in srgb, var(--brand2) 40%, transparent);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --logo-name: 'sphere';
  --logo-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27m16%202%2013%207v14l-13%207L3%2023V9Zm0%202L5%2010l11%206%2011-6ZM5%2012v10l10%206V18Zm12%206v10l10-6V12Z%27%2F%3E%3C%2Fsvg%3E");
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius: 8px;
}
/* Theme 2: monochrome, inspired by Instagram's interface restraint. */
:root[data-theme="mono"] {
  color-scheme: light;
  --brand1: #111111;
  --brand2: #101010;
  --brand3: #fafafa;
  --brand4: #efefef;
  --brand5: #666666;
  --brand6: #383838;
  --brand7: #dedede;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;
  --line: #dedede;
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --button-start: var(--brand4);
  --button-mid: color-mix(in srgb, var(--brand4) 50%, var(--line));
  --button-end: var(--line);
  --button-highlight: var(--surface);
  --button-ink: var(--brand2);
  --logo-name: 'mono';
  --logo-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M9%202h14a7%207%200%200%201%207%207v14a7%207%200%200%201-7%207H9a7%207%200%200%201-7-7V9a7%207%200%200%201%207-7Zm0%203a4%204%200%200%200-4%204v14a4%204%200%200%200%204%204h14a4%204%200%200%200%204-4V9a4%204%200%200%200-4-4Zm7%204a7%207%200%201%201%200%2014%207%207%200%200%201%200-14Zm0%203a4%204%200%201%200%200%208%204%204%200%200%200%200-8Z%27%2F%3E%3C%2Fsvg%3E");
}
/* Theme 3: charcoal surfaces and quiet accents, informed by Linear on Mobbin. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --brand1: #b8afff;
  --brand2: #f0f0f3;
  --brand3: #111114;
  --brand4: #222228;
  --brand5: #aaaab5;
  --brand6: #c5beff;
  --brand7: #e0b5ff;
  --surface: #0c0c0f;
  --surface-muted: #19191e;
  --line: #303037;
  --on-brand: #17151f;
  --button-start: var(--brand1);
  --button-mid: color-mix(in srgb, var(--brand1) 55%, var(--brand7));
  --button-end: var(--brand7);
  --button-highlight: var(--brand6);
  --button-ink: var(--on-brand);
  --scrim: #00000066;
  --shadow: #00000066;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --logo-name: 'orbit';
  --logo-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M16%202a14%2014%200%201%201%200%2028%2014%2014%200%200%201%200-28Zm0%203a11%2011%200%201%200%200%2022%2011%2011%200%200%200%200-22Z%27%2F%3E%3Cpath%20d%3D%27m6%2024%2018-18%202%202L8%2026Z%27%2F%3E%3C%2Fsvg%3E");
}
/* Theme 4: Databricks-inspired red-orange, navy, and open white space. */
:root[data-theme="signal"] {
  color-scheme: light;
  --brand1: #eb1600;
  --brand2: #1b3139;
  --brand3: #f5f6f7;
  --brand4: #ffeae6;
  --brand5: #53636a;
  --brand6: #8b211b;
  --brand7: #963281;
  --surface: #ffffff;
  --surface-muted: #f0f3f4;
  --line: #dce2e5;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-heading: 'DM Sans', Arial, sans-serif;
  --button-start: var(--brand1);
  --button-mid: color-mix(in srgb, var(--brand1) 55%, var(--brand7));
  --button-end: var(--brand7);
  --button-highlight: #ff725d;
  --logo-name: 'signal';
  --logo-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M3%205h26v5H3Zm0%209h19v5H3Zm0%209h26v5H3Z%27%2F%3E%3C%2Fsvg%3E");
}
/* Theme 5: cobalt, cool neutrals, and geometric Manrope typography. */
:root[data-theme="current"] {
  color-scheme: light;
  --brand1: #1554ed;
  --brand2: #122141;
  --brand3: #f5f8ff;
  --brand4: #e5edff;
  --brand5: #53627c;
  --brand6: #173f9c;
  --brand7: #7936cb;
  --surface: #ffffff;
  --surface-muted: #f0f4fc;
  --line: #d9e1f0;
  --font-body: 'Manrope', Arial, sans-serif;
  --font-heading: 'Manrope', Arial, sans-serif;
  --button-start: var(--brand1);
  --button-mid: color-mix(in srgb, var(--brand1) 55%, var(--brand7));
  --button-end: var(--brand7);
  --button-highlight: #7b9aff;
  --logo-name: 'current';
  --logo-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M2%2010c5-8%209-8%2014%200s9%208%2014%200v6c-5%208-9%208-14%200S7%208%202%2016Zm0%2012c5-8%209-8%2014%200s9%208%2014%200v6c-5%205-9%205-14-1S7%2020%202%2027Z%27%2F%3E%3C%2Fsvg%3E");
}
body { font-family: var(--font-body); color: var(--brand2); }
h1, h2, h3 { font-family: var(--font-heading); }
/* Generic logo slot. The global theme supplies its mark and wordmark. */
.brand-logo { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--brand2); font-family: var(--font-heading); font-size: 21px; font-weight: 600; letter-spacing: -.6px; line-height: 1.2; }
.brand-logo::before { content: ''; display: block; width: 25px; height: 28px; background: currentColor; mask: var(--logo-mark) center / contain no-repeat; }
.brand-logo::after { content: var(--logo-name); }

.flex{display:flex}.grid{display:grid}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.rounded{border-radius:var(--radius)}.text-brand1{color:var(--brand1)}.text-brand2{color:var(--brand2)}.text-brand3{color:var(--brand3)}.bg-brand1{background:var(--brand1)}.bg-brand2{background:var(--brand2)}.bg-brand3{background:var(--brand3)}.bg-brand4{background:var(--brand4)}.text-sm{font-size:14px}.font-medium{font-weight:500}.w-full{width:100%}