/* StreamClipper design system: shared fonts, palette, themes and sizing. */
@font-face {
  font-family: Barlow Condensed;
  src: url("/fonts/barlow-condensed-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --brand-violet: #261344;
  --brand-lilac: #ccb2ff;
  --brand-paper: #f6f3fb;
  --brand-lilac-hover: #dfceff;
  color-scheme: light dark;
  --bg: light-dark(var(--brand-paper), #130e1c);
  --text: light-dark(var(--brand-violet), var(--brand-paper));
  --text-muted: light-dark(#665775, #c4b7d5);
  --accent: var(--brand-lilac);
  --accent-light: var(--brand-lilac);
  --border: light-dark(#d5ccdf, #443451);
  --studio: var(--brand-violet);
  --studio-muted: #d4c5e8;
  --on-studio: var(--brand-paper);
  --on-accent: var(--brand-violet);
  --surface: light-dark(#ede5f7, #21172e);
  --surface-hover: light-dark(#e9dff7, #352443);
  --surface-avatar: light-dark(#e9dff5, #352443);
  --border-strong: light-dark(#bca9ce, #665176);
  --border-control: light-dark(#9a86ad, #a18ab5);
  --border-detail: light-dark(#c5b4d7, #554165);
  --border-step: light-dark(#b0a0bf, #665176);
  --text-accent: light-dark(#79549b, var(--brand-lilac));
  --rating: light-dark(#76509d, var(--brand-lilac));
  --focus: light-dark(#9364e8, var(--brand-lilac));
  --solid-action: light-dark(var(--brand-violet), var(--brand-lilac));
  --solid-action-text: light-dark(var(--brand-paper), var(--brand-violet));
  --solid-action-hover: light-dark(#402064, var(--brand-lilac-hover));
  --cta-bg: light-dark(var(--brand-lilac), var(--brand-violet));
  --cta-text: light-dark(var(--brand-violet), var(--brand-paper));
  --cta-muted: light-dark(#513766, #d4c5e8);
  --radius: 12px;
  --surface-raised: light-dark(#ffffff, #2c1e3c);
  --surface-proof: light-dark(#e5d8f6, #281936);
  --surface-proof-card: light-dark(#ffffff, #392649);
  --surface-media: light-dark(var(--brand-violet), #30204a);
  --featured-surface: light-dark(var(--brand-violet), #422369);
  --shadow-panel:
    0 16px 36px -12px light-dark(rgb(48 22 78 / 24%), rgb(0 0 0 / 50%)),
    0 5px 12px -6px light-dark(rgb(48 22 78 / 14%), rgb(0 0 0 / 32%));
  --shadow-featured: 0 24px 44px -14px
    light-dark(rgb(66 28 106 / 38%), rgb(0 0 0 / 64%));
  --shadow-action: 0 8px 18px -8px rgb(14 5 28 / 55%);
  --shadow-action-hover: 0 12px 24px -8px rgb(14 5 28 / 65%);
  --shadow-studio: 0 12px 24px -8px rgb(9 3 20 / 65%);
  --font-body: Manrope, sans-serif;
  --font-display: "Barlow Condensed", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --bg-card: var(--surface-raised);
  --bg-card-hover: var(--surface-hover);
  --surface-soft: color-mix(in srgb, var(--text) 4%, transparent);
  --surface-overlay: color-mix(in srgb, var(--bg-card) 94%, transparent);
  --accent-hover: var(--brand-lilac-hover);
  --accent-glow: color-mix(in srgb, var(--text-accent) 18%, transparent);
  --success: light-dark(#176b4c, #70d8ae);
  --danger: light-dark(#b32942, #ff97a7);
  --warning: light-dark(#835409, #f4ca7a);
  --green: var(--success);
  --red: var(--danger);
  --yellow: var(--warning);
  --success-soft: color-mix(in srgb, var(--success) 10%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 10%, transparent);
  --accent-soft: color-mix(in srgb, var(--text-accent) 10%, transparent);
  --sidebar-w: 252px;
  --duration-fast: 180ms;
  --on-success: light-dark(white, #102e22);
  --on-danger: light-dark(white, #35121a);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}