/* Design tokens — Stripe Dashboard inspired.
 * Warm grays, signature purple, soft layered shadows.
 * Light on :root, dark on [data-bs-theme="dark"].
 */

:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Brand / accent — Stripe blurple */
    --brand-50:  #f5f4ff;
    --brand-100: #ebe9fe;
    --brand-200: #d6d2fc;
    --brand-300: #b3acfa;
    --brand-400: #8b80f6;
    --brand-500: #635bff;
    --brand-600: #5a52e8;
    --brand-700: #4f47cf;
    --brand-800: #3e389e;
    --brand-900: #2a2670;

    /* Neutral scale — slight cool-blue tint (Stripe-warm) */
    --neutral-50:  #f7fafc;
    --neutral-100: #f0f4f8;
    --neutral-150: #e6ebf1;
    --neutral-200: #dbe1ea;
    --neutral-300: #c1cad6;
    --neutral-400: #8792a2;
    --neutral-500: #697386;
    --neutral-600: #4a5468;
    --neutral-700: #3c4257;
    --neutral-800: #2a2f45;
    --neutral-900: #1a1f36;
    --neutral-950: #0a0e1f;

    /* Surfaces */
    --bg:               #f6f9fc;
    --bg-subtle:        #fafbfc;
    --bg-muted:         #eff3f8;
    --surface:          #ffffff;
    --surface-elevated: #ffffff;
    --surface-hover:    #f7fafc;
    --overlay:          rgba(26, 31, 54, .04);

    /* Borders */
    --border:        #e3e8ee;
    --border-strong: #cdd5df;
    --border-muted:  #ebeef3;

    /* Text */
    --text:           #1a1f36;
    --text-strong:    #0a0e27;
    --text-muted:     #4f566b;
    --text-subtle:    #697386;
    --text-on-accent: #ffffff;

    /* Accent (interactive) */
    --accent:         #635bff;
    --accent-hover:   #5a52e8;
    --accent-active:  #4f47cf;
    --accent-fg:      #ffffff;
    --accent-soft:    #f5f4ff;
    --accent-soft-bd: #d6d2fc;
    --accent-ring:    rgba(99, 91, 255, .2);

    /* Semantic */
    --success:        #1ea672;
    --success-bg:     #ecfdf5;
    --success-border: #a7f3d0;
    --success-fg:     #065f46;

    --warning:        #c8702f;
    --warning-bg:     #fff8eb;
    --warning-border: #fcd9b6;
    --warning-fg:     #8a4a18;

    --danger:         #df1b41;
    --danger-bg:      #fef2f4;
    --danger-border:  #fbb6c5;
    --danger-fg:      #971432;

    --info:           #3a72ed;
    --info-bg:        #eff5fe;
    --info-border:    #b9cffc;
    --info-fg:        #1d4ed8;

    /* Status pills (dot + tinted bg) */
    --pill-running-fg:  #065f46;
    --pill-running-bg:  #ecfdf5;
    --pill-running-bd:  #a7f3d0;
    --pill-running-dot: #10b981;

    --pill-scheduled-fg: #1e40af;
    --pill-scheduled-bg: #eff5fe;
    --pill-scheduled-bd: #b9cffc;
    --pill-scheduled-dot:#3a72ed;

    --pill-paused-fg:  #8a4a18;
    --pill-paused-bg:  #fff8eb;
    --pill-paused-bd:  #fcd9b6;
    --pill-paused-dot: #d97706;

    --pill-failed-fg:  #971432;
    --pill-failed-bg:  #fef2f4;
    --pill-failed-bd:  #fbb6c5;
    --pill-failed-dot: #df1b41;

    --pill-completed-fg: #4a5468;
    --pill-completed-bg: #f0f4f8;
    --pill-completed-bd: #dbe1ea;
    --pill-completed-dot:#697386;

    --pill-draft-fg:   #697386;
    --pill-draft-bg:   #f7fafc;
    --pill-draft-bd:   #e3e8ee;
    --pill-draft-dot:  #8792a2;

    /* Chart colors */
    --chart-grid:    #ebeef3;
    --chart-axis:    #697386;
    --chart-primary: #635bff;
    --chart-success: #1ea672;
    --chart-failed:  #df1b41;

    /* Soft layered Stripe shadows */
    --shadow-xs: 0 1px 1px rgba(50, 50, 93, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-sm: 0 2px 5px rgba(50, 50, 93, .07), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 9px rgba(50, 50, 93, .08), 0 1px 3px rgba(0, 0, 0, .05);
    --shadow-lg: 0 13px 27px -5px rgba(50, 50, 93, .14), 0 8px 16px -8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 30px 60px -12px rgba(50, 50, 93, .2), 0 18px 36px -18px rgba(0, 0, 0, .15);
    --shadow-focus: 0 0 0 4px var(--accent-ring);
    --shadow-card-hover: 0 8px 20px rgba(50, 50, 93, .1), 0 2px 4px rgba(0, 0, 0, .05);

    /* Radius */
    --r-xs:   3px;
    --r-sm:   5px;
    --r:      6px;
    --r-md:   8px;
    --r-lg:   10px;
    --r-xl:   14px;
    --r-pill: 999px;

    /* Spacing scale (4px base) */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;
    --sp-9: 3rem;
    --sp-10: 4rem;

    /* Type scale */
    --fs-xs:   .75rem;
    --fs-sm:   .8125rem;
    --fs-md:   .875rem;
    --fs-base: .9375rem;
    --fs-lg:   1rem;
    --fs-xl:   1.125rem;
    --fs-2xl:  1.375rem;
    --fs-3xl:  1.75rem;
    --fs-4xl:  2.25rem;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.5;

    /* Fonts */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Layout */
    --topbar-h:  60px;
    --sidebar-w: 248px;

    /* Motion */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);

    /* Bootstrap variable bridge */
    --bs-body-bg:           var(--bg);
    --bs-body-color:        var(--text);
    --bs-body-font-family:  var(--font-sans);
    --bs-body-font-size:    var(--fs-base);
    --bs-body-line-height:  var(--lh-normal);
    --bs-secondary-color:   var(--text-muted);
    --bs-tertiary-color:    var(--text-subtle);
    --bs-border-color:      var(--border);
    --bs-border-radius:     var(--r-md);
    --bs-border-radius-sm:  var(--r-sm);
    --bs-border-radius-lg:  var(--r-lg);
    --bs-link-color:        var(--accent);
    --bs-link-hover-color:  var(--accent-hover);
    --bs-emphasis-color:    var(--text-strong);
    --bs-heading-color:     var(--text-strong);
    --bs-primary:           var(--accent);
    --bs-primary-rgb:       99, 91, 255;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bg:               #0a0e1f;
    --bg-subtle:        #0e1228;
    --bg-muted:         #14193a;
    --surface:          #11163a;
    --surface-elevated: #1a1f44;
    --surface-hover:    #1a1f44;
    --overlay:          rgba(255, 255, 255, .04);

    --border:        #232853;
    --border-strong: #2e3566;
    --border-muted:  #1a1f44;

    --text:           #e6e9f0;
    --text-strong:    #ffffff;
    --text-muted:     #a3acc4;
    --text-subtle:    #7a839f;
    --text-on-accent: #ffffff;

    --accent:         #7c75ff;
    --accent-hover:   #9089ff;
    --accent-active:  #635bff;
    --accent-fg:      #ffffff;
    --accent-soft:    rgba(124, 117, 255, .14);
    --accent-soft-bd: rgba(124, 117, 255, .3);
    --accent-ring:    rgba(124, 117, 255, .35);

    --success:        #34d399;
    --success-bg:     rgba(52, 211, 153, .12);
    --success-border: rgba(52, 211, 153, .28);
    --success-fg:     #6ee7b7;

    --warning:        #fbbf24;
    --warning-bg:     rgba(251, 191, 36, .12);
    --warning-border: rgba(251, 191, 36, .28);
    --warning-fg:     #fcd34d;

    --danger:         #f87171;
    --danger-bg:      rgba(248, 113, 113, .12);
    --danger-border:  rgba(248, 113, 113, .3);
    --danger-fg:      #fca5a5;

    --info:           #60a5fa;
    --info-bg:        rgba(96, 165, 250, .12);
    --info-border:    rgba(96, 165, 250, .3);
    --info-fg:        #93c5fd;

    --pill-running-fg:  #6ee7b7;
    --pill-running-bg:  rgba(52, 211, 153, .14);
    --pill-running-bd:  rgba(52, 211, 153, .3);
    --pill-running-dot: #34d399;

    --pill-scheduled-fg: #93c5fd;
    --pill-scheduled-bg: rgba(96, 165, 250, .14);
    --pill-scheduled-bd: rgba(96, 165, 250, .3);
    --pill-scheduled-dot:#60a5fa;

    --pill-paused-fg:  #fcd34d;
    --pill-paused-bg:  rgba(251, 191, 36, .14);
    --pill-paused-bd:  rgba(251, 191, 36, .3);
    --pill-paused-dot: #fbbf24;

    --pill-failed-fg:  #fca5a5;
    --pill-failed-bg:  rgba(248, 113, 113, .14);
    --pill-failed-bd:  rgba(248, 113, 113, .3);
    --pill-failed-dot: #f87171;

    --pill-completed-fg: #c1cad6;
    --pill-completed-bg: rgba(255, 255, 255, .06);
    --pill-completed-bd: rgba(255, 255, 255, .12);
    --pill-completed-dot:#a3acc4;

    --pill-draft-fg:  #a3acc4;
    --pill-draft-bg:  rgba(255, 255, 255, .04);
    --pill-draft-bd:  rgba(255, 255, 255, .1);
    --pill-draft-dot: #7a839f;

    --chart-grid:    #1f2447;
    --chart-axis:    #7a839f;
    --chart-primary: #7c75ff;
    --chart-success: #34d399;
    --chart-failed:  #f87171;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 9px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 13px 27px -5px rgba(0, 0, 0, .5), 0 8px 16px -8px rgba(0, 0, 0, .4);
    --shadow-xl: 0 30px 60px -12px rgba(0, 0, 0, .55), 0 18px 36px -18px rgba(0, 0, 0, .4);
    --shadow-focus: 0 0 0 4px var(--accent-ring);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);

    --bs-body-bg:           var(--bg);
    --bs-body-color:        var(--text);
    --bs-secondary-color:   var(--text-muted);
    --bs-tertiary-color:    var(--text-subtle);
    --bs-border-color:      var(--border);
    --bs-link-color:        var(--accent);
    --bs-link-hover-color:  var(--accent-hover);
    --bs-emphasis-color:    var(--text-strong);
    --bs-heading-color:     var(--text-strong);
    --bs-primary:           var(--accent);
}

* { box-sizing: border-box; }
*:focus { outline: none; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

::selection { background: var(--accent-soft); color: var(--accent); }

[data-bs-theme="dark"] ::selection { background: var(--accent); color: var(--accent-fg); }

code, kbd, samp, pre, .font-monospace {
    font-family: var(--font-mono);
    font-size: .92em;
}