:root {
  --sdb-orange: #ff6600;
  --sdb-orange-dark: #e65c00;
  --sdb-amber: #f4a51c;
  --sdb-gold: #d99622;
  --sdb-graphite: #14211f;
  --sdb-black: #050505;
  --sdb-dark: #0d0a07;
  --sdb-white: #ffffff;
  --sdb-offwhite: #faf7f2;
  --sdb-muted: #8a8a8a;
  --sombio-bg: #050505;
  --sombio-surface: rgba(255, 255, 255, .08);
  --sombio-surface-strong: rgba(255, 255, 255, .14);
  --sombio-text: #ffffff;
  --sombio-muted: rgba(255, 255, 255, .72);
  --sombio-line: rgba(255, 255, 255, .14);
  --sombio-accent: var(--sdb-orange);
  --sombio-accent-2: var(--sdb-amber);
  --sombio-radius: 28px;
  --sombio-radius-sm: 18px;
  --sombio-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

body[data-sombio-type] {
  --brand: var(--sombio-accent);
  --brand-2: var(--sombio-accent-2);
  --brand2: var(--sombio-accent-2);
  --bg: var(--sombio-bg);
  --bg2: color-mix(in srgb, var(--sombio-bg) 88%, var(--sombio-surface-strong));
  --surface: var(--sombio-surface);
  --surface-2: var(--sombio-surface-strong);
  --card: var(--sombio-surface);
  --card2: var(--sombio-surface-strong);
  --line: var(--sombio-line);
  --text: var(--sombio-text);
  --muted: var(--sombio-muted);
  accent-color: var(--sombio-accent);
}

body[data-sombio-type][data-viewer-mode="light"] {
  --sombio-bg: #faf7f2;
  --sombio-surface: rgba(255, 255, 255, .86);
  --sombio-surface-strong: #ffffff;
  --sombio-text: #17120d;
  --sombio-muted: #66584a;
  --sombio-line: rgba(23, 18, 13, .12);
}
body[data-sombio-type][data-accent-color="#ff6600"] { --sombio-accent: #ff6600; }
body[data-sombio-type][data-accent-color="#f4a51c"] { --sombio-accent: #f4a51c; }
body[data-sombio-type][data-accent-color="#d99622"] { --sombio-accent: #d99622; }
body[data-sombio-type][data-accent-color="#22c55e"] { --sombio-accent: #22c55e; }
body[data-sombio-type][data-accent-color="#38bdf8"] { --sombio-accent: #38bdf8; }
body[data-sombio-type][data-accent-color="#e11d48"] { --sombio-accent: #e11d48; }
body[data-sombio-type][data-accent-color="#d946ef"] { --sombio-accent: #d946ef; }

body[data-sombio-type][data-button-style="pill"] {
  --sombio-radius: 999px;
  --sombio-radius-sm: 999px;
}

body[data-sombio-type][data-button-style="sharp"] {
  --sombio-radius: 16px;
  --sombio-radius-sm: 10px;
}

body[data-sombio-type][data-button-style="pill"] .btn,
body[data-sombio-type][data-button-style="pill"] .nav a,
body[data-sombio-type][data-button-style="pill"] .nav button,
body[data-sombio-type][data-button-style="pill"] .icon-btn,
body[data-sombio-type][data-button-style="pill"] .top-back,
body[data-sombio-type][data-button-style="pill"] .social-chip,
body[data-sombio-type][data-button-style="pill"] .pill,
body[data-sombio-type][data-button-style="pill"] .bottom-nav a,
body[data-sombio-type][data-button-style="pill"] .bottom-nav button,
body[data-sombio-type][data-button-style="pill"] .sombio-channel-card {
  border-radius: 999px;
}

body[data-sombio-type][data-button-style="sharp"] .btn,
body[data-sombio-type][data-button-style="sharp"] .nav a,
body[data-sombio-type][data-button-style="sharp"] .nav button,
body[data-sombio-type][data-button-style="sharp"] .icon-btn,
body[data-sombio-type][data-button-style="sharp"] .top-back,
body[data-sombio-type][data-button-style="sharp"] .social-chip,
body[data-sombio-type][data-button-style="sharp"] .pill,
body[data-sombio-type][data-button-style="sharp"] .bottom-nav a,
body[data-sombio-type][data-button-style="sharp"] .bottom-nav button,
body[data-sombio-type][data-button-style="sharp"] .sombio-channel-card {
  border-radius: 12px;
}

body[data-sombio-type][data-visual-density="compact"] section,
body[data-sombio-type][data-visual-density="compact"] .sombio-channel-hub {
  padding-top: 48px;
  padding-bottom: 48px;
}

body[data-sombio-type][data-visual-density="spacious"] section,
body[data-sombio-type][data-visual-density="spacious"] .sombio-channel-hub {
  padding-top: 88px;
  padding-bottom: 88px;
}

body[data-sombio-type][data-visual-density="compact"] .btn {
  min-height: 42px;
  padding-inline: 14px;
}

body[data-sombio-type][data-visual-density="spacious"] .btn {
  min-height: 56px;
  padding-inline: 22px;
}

body[data-sombio-type][data-visual-density="compact"] .sombio-channel-card {
  min-height: 78px;
  padding: 12px;
}

body[data-sombio-type][data-visual-density="spacious"] .sombio-channel-card {
  min-height: 108px;
  padding: 18px;
}