:root {
    --sf-color-primary:         #2563eb;
    --sf-color-primary-dark:    #1d4ed8;
    --sf-color-primary-fill:    #1d4ed8;
    --sf-color-primary-soft:    rgba(37, 99, 235, 0.10);
    --sf-color-primary-border:  rgba(37, 99, 235, 0.30);
    --sf-color-primary-ring:    rgba(37, 99, 235, 0.18);

    --sf-accent:      var(--sf-brand, var(--sf-color-primary));
    --sf-accent-soft: color-mix(in srgb, var(--sf-accent) 10%, transparent);
    --sf-accent-ring: color-mix(in srgb, var(--sf-accent) 18%, transparent);
    --sf-accent-ink:  color-mix(in srgb, var(--sf-accent) 72%, var(--sf-color-text));
    --sf-accent-2:      var(--sf-brand-2, var(--sf-accent));
    --sf-accent-2-soft: color-mix(in srgb, var(--sf-accent-2) 10%, transparent);

    --sf-color-canvas:          #f8fafc;

    --sf-recorder-prompt-bg:    #0f1222;
    --sf-color-canvas-soft:     #f1f5f9;
    --sf-color-surface:         #ffffff;
    --sf-color-stage:           #0b0f18;
    --sf-color-on-stage:        #e2e8f0;
    --sf-color-on-stage-muted:  #94a3b8;
    --sf-color-on-stage-danger: #fca5a5;
    --sf-color-on-stage-ok:     #86efac;
    --sf-color-on-stage-veil:   rgba(255, 255, 255, .18);
    --sf-color-on-primary:      #ffffff;
    --sf-color-on-fill:         #ffffff;
    --sf-color-on-warning:      #451a03;
    --sf-color-surface-hover:   #fafbfd;
    --sf-color-scrim:           rgba(15, 23, 42, .38);
    --sf-color-surface-strong:  #fefefe;

    --sf-color-text:            #0f172a;
    --sf-color-ink:             var(--sf-color-text);
    --sf-color-text-secondary:  #475569;
    --sf-color-text-muted:      rgba(15, 23, 42, 0.65);
    --sf-color-text-faint:      rgba(15, 23, 42, 0.45);
    --sf-color-text-disabled:   rgba(15, 23, 42, 0.30);

    --sf-ink:                   var(--sf-color-text);
    --sf-muted:                 var(--sf-color-text-muted);
    --sf-card:                  var(--sf-color-surface);
    --sf-border:                var(--sf-color-border-strong);
    --sf-border2:               var(--sf-color-border);

    --sf-color-text-inverse:    #ffffff;
    --sf-color-stage:           #0b0f18;

    --sf-color-border:          rgba(15, 23, 42, 0.08);
    --sf-color-border-strong:   rgba(15, 23, 42, 0.14);
    --sf-color-border-focus:    rgba(37, 99, 235, 0.55);
    --sf-color-switch-off:      #64748b;

    --sf-color-danger:          #dc2626;
    --sf-color-danger-soft:     rgba(220, 38, 38, 0.10);
    --sf-color-danger-ink:      #991b1b;
    --sf-color-warning:         #f59e0b;
    --sf-color-warning-soft:    rgba(245, 158, 11, 0.12);
    --sf-color-warning-border:  rgba(245, 158, 11, 0.35);
    --sf-color-warning-ink:     #92400e;
    --sf-color-success:         #16a34a;
    --sf-color-success-fill:    #15803d;
    --sf-color-success-soft:    rgba(22, 163, 74, 0.10);
    --sf-color-success-ink:     #166534;
    --sf-color-info:            #0891b2;
    --sf-color-info-soft:       rgba(8, 145, 178, 0.10);
    --sf-color-info-ink:        #155e75;

    --sf-color-purple:          #6d28d9;
    --sf-color-purple-soft:     #efe7fd;

    --sf-color-teal:            #26b3b6;
    --sf-color-teal-ink:        #179095;
    --sf-color-teal-deep:       #036464;
    --sf-color-teal-soft:       #d2f7ee;
    --sf-color-teal-border:     #8ed8d5;
    --sf-color-steel-ink:       #195b8d;
    --sf-color-steel-soft:      #eef6fa;
    --sf-color-rose-ink:        #a83a68;
    --sf-color-rose-soft:       #fce8f0;
    --sf-callstage-from:        #172554;
    --sf-callstage-to:          #1e3a8a;
    --sf-callstage-glow:        rgba(96, 165, 250, 0.30);
    --sf-callstage-ink:         #f8fafc;
    --sf-callstage-soft:        #dbe4f7;
    --sf-callstage-muted:       #b9c8ea;
    --sf-callstage-link:        #bfdbfe;
    --sf-callstage-line:        rgba(255, 255, 255, 0.10);
    --sf-callstage-fill:        rgba(255, 255, 255, 0.07);
    --sf-callstage-fill-strong: rgba(255, 255, 255, 0.13);
    --sf-callstage-button:      #ffffff;
    --sf-callstage-button-ink:  #1d4ed8;
    --sf-callstage-pick:        #f8fafc;
    --sf-callstage-pick-ink:    #0f172a;
    --sf-callstage-on:          #22c55e;
    --sf-callstage-teal:        #5eead4;
    --sf-callstage-green:       #86efac;
    --sf-callstage-violet:      #c4b5fd;
    --sf-callstage-amber:       #fcd34d;
    --sf-callstage-red:         #f87171;
    --sf-callstage-edge:        rgba(255, 255, 255, 0);
    --sf-callstage-shadow:      0 14px 34px rgba(15, 23, 42, 0.16);

    --sf-aurora-1:              #6d5cf6;
    --sf-aurora-2:              #a23df0;

    --sf-color-interactive-brand:       #74d94e;
    --sf-color-interactive-accent:      #ffc20e;
    --sf-color-interactive-ink:         #58595b;
    --sf-color-interactive-grey:        #a6a8ab;
    --sf-color-interactive-grey-mid:    #bbbdbf;
    --sf-color-interactive-grey-light:  #d0d2d3;
    --sf-color-interactive-grey-dark:   #6d6e70;
    --sf-color-interactive-border-soft: rgba(65, 64, 64, 0.2901960784);

    --sf-radius-xs: 6px;
    --sf-radius-sm: 10px;
    --sf-radius-md: 14px;
    --sf-radius-lg: 20px;
    --sf-radius-xl: 28px;
    --sf-radius-pill: 9999px;

    --sf-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
    --sf-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.06);
    --sf-shadow-md:   0 6px 18px rgba(15, 23, 42, 0.08);
    --sf-shadow-lg:   0 18px 40px rgba(15, 23, 42, 0.12);
    --sf-shadow-xl:   0 30px 60px rgba(15, 23, 42, 0.18);
    --sf-shadow-focus: 0 0 0 4px var(--sf-color-primary-ring);

    --sf-space-1:  4px;
    --sf-space-2:  8px;
    --sf-space-3:  12px;
    --sf-space-4:  16px;
    --sf-space-5:  20px;
    --sf-space-6:  24px;
    --sf-space-7:  32px;
    --sf-space-8:  40px;
    --sf-space-9:  56px;
    --sf-space-10: 80px;

    --sf-font-sans:    var(--sf-brand-font-body, 'Inter'), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sf-font-heading: var(--sf-brand-font-heading, var(--sf-brand-font-body, 'Inter')), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sf-font-xs:    11.5px;
    --sf-font-sm:    13px;
    --sf-font-base:  14.5px;
    --sf-font-md:    15.5px;
    --sf-font-lg:    18px;
    --sf-font-xl:    22px;
    --sf-font-2xl:   28px;
    --sf-font-3xl:   36px;
    --sf-font-display: 48px;

    --sf-weight-normal:    400;
    --sf-weight-medium:    500;
    --sf-weight-semibold:  600;
    --sf-weight-bold:      700;
    --sf-weight-black:     900;

    --sf-leading-tight:   1.15;
    --sf-leading-snug:    1.30;
    --sf-leading-normal:  1.45;
    --sf-leading-relaxed: 1.60;

    --sf-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --sf-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --sf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --sf-dur-fast:    120ms;
    --sf-dur-base:    180ms;
    --sf-dur-slow:    260ms;

    --sf-z-base:     1;
    --sf-z-sticky:   100;
    --sf-z-dropdown: 200;
    --sf-z-overlay:  900;
    --sf-z-modal:    1000;
    --sf-z-toast:    1100;

    --sf-terminal-foreground:     #1f2328;
    --sf-terminal-cursor:         #c2410c;
    --sf-terminal-selection:      rgba(217, 119, 87, 0.25);
    --sf-terminal-black:          #24292f;
    --sf-terminal-red:            #b3261e;
    --sf-terminal-green:          #2f6f2a;
    --sf-terminal-yellow:         #7a5a00;
    --sf-terminal-blue:           #2458b3;
    --sf-terminal-magenta:        #7d3c98;
    --sf-terminal-cyan:           #16706a;
    --sf-terminal-white:          #6e7781;
    --sf-terminal-bright-black:   #57606a;
    --sf-terminal-bright-red:     #c4554d;
    --sf-terminal-bright-green:   #3f8a36;
    --sf-terminal-bright-yellow:  #8f6c0f;
    --sf-terminal-bright-blue:    #3b6fc6;
    --sf-terminal-bright-magenta: #9150ad;
    --sf-terminal-bright-cyan:    #1f8a80;
    --sf-terminal-bright-white:   #8c959f;
}

[data-bs-theme="dark"] {
    --sf-color-primary:         #60a5fa;
    --sf-color-primary-dark:    #3b82f6;
    --sf-color-primary-fill:    #2563eb;
    --sf-color-primary-soft:    rgba(96, 165, 250, 0.15);
    --sf-color-primary-border:  rgba(96, 165, 250, 0.35);
    --sf-color-primary-ring:    rgba(96, 165, 250, 0.20);

    --sf-accent: var(--sf-brand-dark, var(--sf-color-primary));
    --sf-accent-ink: color-mix(in srgb, var(--sf-accent) 72%, #f1f5f9);
    --sf-accent-2: var(--sf-brand-2-dark, var(--sf-accent));

    --sf-color-canvas:          #020617;
    --sf-color-canvas-soft:     rgba(255, 255, 255, 0.04);
    --sf-color-surface:         #0f172a;
    --sf-color-stage:           #0b0f18;
    --sf-color-on-stage:        #e2e8f0;
    --sf-color-on-stage-muted:  #94a3b8;
    --sf-color-on-stage-danger: #fca5a5;
    --sf-color-on-stage-ok:     #86efac;
    --sf-color-on-stage-veil:   rgba(255, 255, 255, .18);
    --sf-color-on-primary:      #0f172a;
    --sf-color-on-fill:         #ffffff;
    --sf-color-on-warning:      #451a03;
    --sf-color-surface-hover:   #16203a;
    --sf-color-scrim:           rgba(2, 6, 23, .62);
    --sf-color-surface-strong:  #111a2e;

    --sf-color-text:            #f1f5f9;
    --sf-color-ink:             var(--sf-color-text);
    --sf-color-text-secondary:  #a8b5c9;
    --sf-color-text-muted:      #94a3b8;
    --sf-color-text-faint:      #64748b;
    --sf-color-text-disabled:   rgba(241, 245, 249, 0.30);

    --sf-ink:                   var(--sf-color-text);
    --sf-muted:                 var(--sf-color-text-muted);
    --sf-card:                  var(--sf-color-surface);
    --sf-border:                var(--sf-color-border-strong);
    --sf-border2:               var(--sf-color-border);

    --sf-color-text-inverse:    #0f172a;

    --sf-color-border:          rgba(255, 255, 255, 0.08);
    --sf-color-border-strong:   rgba(255, 255, 255, 0.14);
    --sf-color-border-focus:    rgba(96, 165, 250, 0.55);
    --sf-color-switch-off:      #64748b;

    --sf-color-danger:          #f87171;
    --sf-color-danger-soft:     rgba(248, 113, 113, 0.16);
    --sf-color-danger-ink:      #fecaca;
    --sf-color-warning:         #fbbf24;
    --sf-color-warning-soft:    rgba(245, 158, 11, 0.18);
    --sf-color-warning-border:  rgba(251, 191, 36, 0.35);
    --sf-color-warning-ink:     #fed7aa;
    --sf-color-success:         #4ade80;
    --sf-color-success-fill:    #15803d;
    --sf-color-success-soft:    rgba(34, 197, 94, 0.16);
    --sf-color-success-ink:     #bbf7d0;
    --sf-color-info:            #22d3ee;
    --sf-color-info-soft:       rgba(8, 145, 178, 0.16);
    --sf-color-info-ink:        #a5f3fc;

    --sf-color-purple:          #a78bfa;
    --sf-color-purple-soft:     rgba(109, 40, 217, 0.22);

    --sf-color-teal:            #5eead4;
    --sf-color-teal-ink:        #99f6e4;
    --sf-color-teal-deep:       #ccfbf1;
    --sf-color-teal-soft:       rgba(45, 212, 191, 0.16);
    --sf-color-teal-border:     rgba(94, 234, 212, 0.45);
    --sf-color-steel-ink:       #93c5fd;
    --sf-color-steel-soft:      rgba(147, 197, 253, 0.12);
    --sf-color-rose-ink:        #fbcfe8;
    --sf-color-rose-soft:       rgba(236, 72, 153, 0.16);
    --sf-callstage-edge:        rgba(96, 165, 250, 0.24);
    --sf-callstage-shadow:      0 0 0 0 rgba(0, 0, 0, 0);

    --sf-terminal-foreground:     #e8e6e3;
    --sf-terminal-cursor:         #d97757;
    --sf-terminal-selection:      rgba(217, 119, 87, 0.33);
    --sf-terminal-black:          #1f1e1d;
    --sf-terminal-red:            #c4554d;
    --sf-terminal-green:          #7da869;
    --sf-terminal-yellow:         #c29a4b;
    --sf-terminal-blue:           #6f9ee8;
    --sf-terminal-magenta:        #b07ac4;
    --sf-terminal-cyan:           #5fb3a1;
    --sf-terminal-white:          #e8e6e3;
    --sf-terminal-bright-black:   #8a8880;
    --sf-terminal-bright-red:     #e05d5d;
    --sf-terminal-bright-green:   #94c07f;
    --sf-terminal-bright-yellow:  #d9b36a;
    --sf-terminal-bright-blue:    #8fb5f0;
    --sf-terminal-bright-magenta: #c795d6;
    --sf-terminal-bright-cyan:    #7cc9b8;
    --sf-terminal-bright-white:   #faf9f5;
}