/* Canonical Bell Studio foundation. Run node scripts/sync-design-system.mjs after edits.
   Deliberately no element resets: safe to load inside Canvas and beside legacy runners. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./outfit-latin.woff2') format('woff2');
}
:root {
  --bfc-font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bfc-bg: #fff8ea;
  --bfc-surface: #ffffff;
  --bfc-soft: #eaf0e5;
  --bfc-ink: #0f2421;
  --bfc-muted: #526663;
  --bfc-border: #d9e1da;
  --bfc-primary: #01424f;
  --bfc-primary-hover: #063440;
  --bfc-accent: #edc24e;
  --bfc-accent-hover: #e4b63c;
  --bfc-focus: #087d80;
  --bfc-positive: #1f6b45;
  --bfc-positive-bg: #e3f2ea;
  --bfc-caution: #8a5a00;
  --bfc-caution-bg: #fcefd9;
  --bfc-danger: #9c2f23;
  --bfc-danger-bg: #fbe0dc;
  --bfc-info: #01424f;
  --bfc-info-bg: #ddf3f2;
  --bfc-radius: 12px;
  --bfc-control-radius: 8px;
  --bfc-frame-radius: 24px 0 24px 0;
  --bfc-title: 2.25rem;
  --bfc-section: 1.375rem;
  --bfc-body: 1rem;
  --bfc-small: .875rem;
  --bfc-caption: .8125rem;
  --bfc-space-1: 4px;
  --bfc-space-2: 8px;
  --bfc-space-3: 12px;
  --bfc-space-4: 16px;
  --bfc-space-5: 20px;
  --bfc-space-6: 24px;
  --bfc-space-7: 32px;
  --bfc-space-8: 40px;
  --bfc-shadow-popover: 0 12px 32px rgb(15 36 33 / .14);
}
.bfc-bell {
  display: inline-block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: var(--bfc-accent);
  border-radius: 50% 50% 0 0;
  position: relative;
}
.bfc-bell::after {
  content: '';
  position: absolute;
  inset: 15px 10px 0;
  border-radius: 50% 50% 0 0;
  background: var(--bfc-mark-cutout, var(--bfc-primary));
}
.bfc-motif {
  width: 86px;
  height: 98px;
  flex: 0 0 auto;
  background: var(--bfc-accent);
  border-radius: 48px 48px 0 0;
  position: relative;
  pointer-events: none;
}
.bfc-motif::after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  right: -3px;
  bottom: -7px;
  border-radius: 50%;
  background: var(--bfc-primary);
  border: 3px solid var(--bfc-motif-cutout, var(--bfc-bg));
}