/* =============================================================================
   SYNAPSE-S DESIGN TOKEN SYSTEM — SINGLETON SOURCE OF TRUTH
   ─────────────────────────────────────────────────────────────────────────────
   Every visual value in the product flows from one of these tokens.
   To change a design decision EVERYWHERE, edit ONE value here.
   No raw hex, rgba, or duration values should exist outside this file.

   Sections:
     1.  TYPOGRAPHY       — font sizes, weights, line heights, letter spacing
     2.  SHAPE            — border-radius for every component type
     3.  SPACING          — padding/gap scale
     4.  ELEVATION        — box-shadows and hover lifts
     5.  SEMANTIC ACCENTS — contextual accent colors + their text-on-tint tones
     6.  SURFACE COLORS   — background / neutral surface palette
     7.  TEXT COLORS      — foreground text hierarchy
     8.  BORDER ALPHAS    — rgba(white, X) border opacity tokens
     9.  MOTION           — transition durations and easing curves
    10.  BLUR             — backdrop-filter / blur amounts
    11.  SCROLLBAR        — custom scrollbar sizing and color
    12.  COMPONENT        — reusable utility classes (compose tokens above)
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. TYPOGRAPHY TOKENS
   Global typography scale for consistent text sizing across the application.
   --------------------------------------------------------------------------- */
:root {
    /* Font Family */
    --font-sans: 'Inter', 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Size Scale (Type Scale: 1.200 - Major Third) */
    --text-xs:      0.75rem;   /* 12px — captions, badges */
    --text-sm:      0.875rem;  /* 14px — body text, labels */
    --text-base:    1rem;      /* 16px — default body */
    --text-lg:      1.125rem;  /* 18px — emphasized body */
    --text-xl:      1.25rem;   /* 20px — small headings */
    --text-2xl:     1.5rem;    /* 24px — section headings */
    --text-3xl:     1.875rem;  /* 30px — large headings */
    --text-4xl:     2.25rem;   /* 36px — hero headings */
    --text-5xl:     3rem;      /* 48px — display headings */

    /* Font Weights */
    --font-light:   300;
    --font-normal:  400;
    --font-medium:  500;
    --font-semibold:600;
    --font-bold:    700;
    --font-extrabold:800;

    /* Line Heights */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;
}


/* ---------------------------------------------------------------------------
   2. SHAPE TOKENS
   Change ONE value to go from rounded to squared everywhere.
   --------------------------------------------------------------------------- */
:root {
    /* Cards / bento tiles */
    --radius-card:      0.75rem;   /* 12px — standard card (changed from 1.5rem for sharper UI) */
    --radius-card-sm:   0.5rem;    /* 8px  — inner nested cards */
    --radius-card-lg:   1rem;      /* 16px — hero / feature cards */

    /* Buttons */
    --radius-btn:       0.5rem;    /* 8px  — standard button (changed from 0.75rem) */
    --radius-btn-lg:    0.75rem;   /* 12px — large CTA button (changed from 1rem) */
    --radius-btn-pill:  9999px;   /* pill / badge shape */

    /* Icon containers (the square behind SVG icons) */
    --radius-icon:      0.5rem;    /* 8px  — default icon box (changed from 0.75rem) */
    --radius-icon-sm:   0.375rem;  /* 6px  — compact icon box */

    /* Input fields */
    --radius-input:     0.5rem;    /* 8px */

    /* Dropdown & popover panels */
    --radius-popover:   0.5rem;    /* 8px  (changed from 0.75rem) */

    /* Tags / badges */
    --radius-badge:     0.25rem;   /* 4px  (changed from 0.375rem) */
}


/* ---------------------------------------------------------------------------
   3. SPACING TOKENS
   Universal spacing scale for padding, margins, and gaps.
   --------------------------------------------------------------------------- */
:root {
    /* Padding scale (4px base unit) */
    --space-0:     0;
    --space-1:     0.25rem;  /* 4px */
    --space-2:     0.5rem;   /* 8px */
    --space-3:     0.75rem;  /* 12px */
    --space-4:     1rem;     /* 16px */
    --space-5:     1.25rem;  /* 20px */
    --space-6:     1.5rem;   /* 24px */
    --space-8:     2rem;     /* 32px */
    --space-10:    2.5rem;   /* 40px */
    --space-12:    3rem;     /* 48px */
    --space-16:    4rem;     /* 64px */
    --space-20:    5rem;     /* 80px */

    /* Card-specific padding (semantic) */
    --pad-card-xs:  var(--space-4);     /* 16px */
    --pad-card-sm:  var(--space-5);     /* 20px — compact stat tiles */
    --pad-card:     var(--space-6);     /* 24px — standard card */
    --pad-card-lg:  1.75rem;             /* 28px — detail / hero cards */
    --pad-card-xl:  var(--space-8);     /* 32px — feature highlight cards */

    /* Gap scale */
    --gap-grid:     var(--space-6);     /* 24px — gap between grid tiles */
    --gap-section: var(--space-12);    /* 48px — gap between page sections */
    --gap-sm:       var(--space-2);     /* 8px */
    --gap-md:       var(--space-4);     /* 16px */
    --gap-lg:       var(--space-6);     /* 24px */
}


/* ---------------------------------------------------------------------------
   4. ELEVATION TOKENS
   Shadows for depth hierarchy.
   --------------------------------------------------------------------------- */
:root {
    --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-card-hover:  0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-btn:         0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-btn-primary: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-brand-sm:    0 0 20px rgb(var(--t-p) / 0.15);
    --shadow-brand-lg:    0 0 40px rgb(var(--t-p) / 0.20);
    --shadow-success-glow: 0 0 8px rgb(var(--accent-success) / 0.25);
    --drop-shadow-brand:  drop-shadow(0 0 8px rgb(var(--t-p) / 0.20));
    --shadow-dropdown:    0 8px 24px rgba(0, 0, 0, 0.15);

    /* Hover lift — translateY amount for interactive cards */
    --lift-card:          -2px;
    --lift-card-scale:    1.005;
}


/* ---------------------------------------------------------------------------
   5. SEMANTIC ACCENT TOKENS
   Intentional accent colors for specific meanings.
   NOT the primary/brand color. Use --t-p for that.

   Two values per accent:
     --accent-X       space-separated RGB for the FILL / icon color
                      usage: rgb(var(--accent-X)) or rgb(var(--accent-X) / 0.10)
     --accent-X-text  space-separated RGB for TEXT on a tinted (10%) background
   --------------------------------------------------------------------------- */
:root {
    /* Fill / glyph color */
    --accent-success:  16 185 129;   /* emerald-500 */
    --accent-info:      6 182 212;   /* cyan-500    */
    --accent-tool:    139  92 246;   /* violet-500  */
    --accent-warning: 245 158  11;   /* amber-500   */
    --accent-danger:  239  68  68;   /* red-500     */

    /* Text-on-tint: lighter shade, readable on a 10%-opacity fill */
    --accent-success-text: 134 239 172;  /* emerald-300 */
    --accent-info-text:    103 232 249;  /* cyan-300    */
    --accent-tool-text:    196 181 253;  /* violet-300  */
    --accent-warning-text: 253 224  71;  /* yellow-300  */
    --accent-danger-text:  252 165 165;  /* red-300     */
}


/* ---------------------------------------------------------------------------
   6. SURFACE COLORS
   Dark-mode neutral palette. All values are space-separated R G B so they
   compose with opacity:  rgb(var(--surface-card) / 0.8)

   Hierarchy (darkest → lightest):
     page → card → overlay → raised → hover → active
   --------------------------------------------------------------------------- */
:root {
    --surface-page:    9   9  11;   /* #09090b  body background */
    --surface-card:   14  14  16;   /* #0e0e10  standard card   */
    --surface-overlay:17  17  20;   /* #111114  header rows, overlay bg */
    --surface-raised: 24  24  27;   /* #18181b  raised / hover target   */
    --surface-active: 39  39  42;   /* #27272a  active / selected state  */
    --surface-border: 31  31  35;   /* #1f1f23  hard border (non-white)  */
}


/* ---------------------------------------------------------------------------
   7. TEXT COLORS
   Foreground hierarchy. Space-separated R G B.
   --------------------------------------------------------------------------- */
:root {
    --text-strong:    228 228 231;  /* zinc-200  body copy            */
    --text-default:   212 212 216;  /* zinc-300  softened body copy   */
    --text-muted:     161 161 170;  /* zinc-400  de-emphasized text   */
    --text-soft:      113 113 122;  /* zinc-500  placeholder / label  */
    --text-faint:      82  82  91;  /* zinc-600  column headers       */
    --text-ghost:      63  63  70;  /* zinc-700  barely-visible label */
}


/* ---------------------------------------------------------------------------
   8. BORDER ALPHAS
   White-on-dark border opacities.

   Two forms per level:
     --border-X        direct rgba value  → border: 1px solid var(--border-subtle)
     --border-a-X      alpha fraction     → rgb(255 255 255 / var(--border-a-subtle))
   --------------------------------------------------------------------------- */
:root {
    --border-faint:    rgba(255,255,255,0.03);
    --border-subtle:   rgba(255,255,255,0.05);
    --border-muted:    rgba(255,255,255,0.07);
    --border-standard: rgba(255,255,255,0.08);
    --border-moderate: rgba(255,255,255,0.12);
    --border-strong:   rgba(255,255,255,0.15);

    --border-a-faint:    0.03;
    --border-a-subtle:   0.05;
    --border-a-muted:    0.07;
    --border-a-standard: 0.08;
    --border-a-moderate: 0.12;
    --border-a-strong:   0.15;

    /* Widget default colors */
    --widget-theme-color:     99 102 241;  /* #6366f1 indigo-500 */
    --widget-font-color:      228 228 231; /* #e4e4e7 zinc-200 */
    --widget-bg-color:        9   9  11;   /* #09090b zinc-950 */
    --widget-surface-color:   24  24  27;   /* #18181b zinc-900 */
    --widget-border-color:    39  39  42;   /* #27272a zinc-800 */
    --widget-text-secondary:  161 161 170; /* #a1a1aa zinc-400 */
}


/* ---------------------------------------------------------------------------
   9. MOTION TOKENS
   Single source for all transition timings and easing curves.
   --------------------------------------------------------------------------- */
:root {
    /* Durations */
    --dur-instant: 120ms;   /* micro-interaction (icon scale)  */
    --dur-fast:    200ms;   /* button hover, chip state        */
    --dur-base:    300ms;   /* default UI transition           */
    --dur-slow:    400ms;   /* card lift, modal enter          */
    --dur-slower:  700ms;   /* carousel, page-level animations */
    --dur-shimmer:  2.4s;   /* looping shimmer / progress bar  */

    /* Easing curves */
    --ease-out:     cubic-bezier(0.2, 0, 0, 1);          /* crisp decelerate    */
    --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275); /* springy overshoot */
    --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);        /* material-style      */
    --ease-linear:  linear;
}


/* ---------------------------------------------------------------------------
   10. BLUR TOKENS
   Backdrop / glow blur amounts.
   --------------------------------------------------------------------------- */
:root {
    --blur-xs:   6px;    /* modal overlay / upload widget backdrop   */
    --blur-sm:  20px;    /* navbar glass                   */
    --blur-md:  24px;    /* glass-card backdrop            */
    --blur-lg:  40px;    /* modal backdrop                 */
    --blur-glow:120px;   /* ambient glow spheres           */
}


/* ---------------------------------------------------------------------------
  11. SCROLLBAR TOKENS
   --------------------------------------------------------------------------- */
:root {
    --scrollbar-size:        4px;
    --scrollbar-thumb:       rgba(255,255,255,0.05);
    --scrollbar-thumb-hover: rgba(255,255,255,0.10);
}


/* ---------------------------------------------------------------------------
  12. COMPONENT CLASSES
   These compose tokens above. Zero raw values — edit a token; component updates.
   --------------------------------------------------------------------------- */

/* ── Typography Utility Classes ─────────────────────────────────────────────── */
.text-display {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.text-hero {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.text-h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.text-h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.text-h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

.text-body {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
}

.text-body-lg {
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
}

.text-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
}

.text-caption {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.text-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ── Bento Card ───────────────────────────────────────────────────────────── */
.bento-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    background: linear-gradient(
        135deg,
        rgb(var(--surface-card) / 0.80),
        rgb(var(--surface-page) / 0.90)
    );
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-slow) var(--ease-out),
                border-color var(--dur-slow) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}

.bento-card:hover {
    transform: translateY(var(--lift-card)) scale(var(--lift-card-scale));
    border-color: var(--border-moderate);
    box-shadow: var(--shadow-card-hover);
}

/* Inner gradient border glow */
.bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        var(--border-moderate),
        transparent 40%,
        transparent 60%,
        var(--border-subtle)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ── Bento Card — flat (nested tiles, no hover lift) ─────────────────────── */
.bento-card-flat {
    border-radius: var(--radius-card-sm);
    border: 1px solid var(--border-subtle);
    background: var(--border-faint);
}

/* ── Glass Card ──────────────────────────────────────────────────────────── */
.glass-card {
    background: rgb(var(--surface-card) / 0.45);
    backdrop-filter: blur(var(--blur-md)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ── Icon Box ─────────────────────────────────────────────────────────────── */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-icon);
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-out);
}

.icon-box-sm { width: 2rem;    height: 2rem;    border-radius: var(--radius-icon-sm); }
.icon-box-md { width: 2.5rem;  height: 2.5rem;  border-radius: var(--radius-icon); }
.icon-box-lg { width: 3rem;    height: 3rem;    border-radius: var(--radius-icon); }
.icon-box-xl { width: 3.5rem;  height: 3.5rem;  border-radius: var(--radius-card-sm); }

/* ── Semantic icon box accent modifiers ────────────────────────────────────── */
.icon-box-primary { background: rgb(var(--t-p) / 0.10); color: rgb(var(--t-p)); }
.icon-box-success { background: rgb(var(--accent-success) / 0.10); color: rgb(var(--accent-success)); }
.icon-box-info    { background: rgb(var(--accent-info)    / 0.10); color: rgb(var(--accent-info)); }
.icon-box-tool    { background: rgb(var(--accent-tool)    / 0.10); color: rgb(var(--accent-tool)); }
.icon-box-warning { background: rgb(var(--accent-warning) / 0.10); color: rgb(var(--accent-warning)); }
.icon-box-danger  { background: rgb(var(--accent-danger)  / 0.10); color: rgb(var(--accent-danger)); }

/* ── Standard Button ─────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0 1.25rem;
    height: 2.5rem;
    transition: transform var(--dur-base) var(--ease-spring),
                background-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(0.96); }

.btn-lg {
    height: 3rem;
    padding: 0 2rem;
    border-radius: var(--radius-btn-lg);
    font-weight: 700;
}

.btn-primary {
    background: rgb(var(--text-strong));
    color: rgb(var(--surface-page));
    box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover { background: rgb(var(--text-strong)); }

.btn-brand {
    background: rgb(var(--t-p));
    color: rgb(var(--text-strong));
    box-shadow: var(--shadow-brand-sm);
    transition:
        filter var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}
.btn-brand:hover {
    filter: brightness(1.04);
    box-shadow: var(--shadow-brand-lg);
}

.btn-ghost {
    background: transparent;
    color: rgb(var(--text-muted));
    border: 1px solid var(--border-standard);
}
.btn-ghost:hover { background: var(--border-faint); color: rgb(var(--text-strong)); }

.text-gradient-brand {
    background-image: linear-gradient(180deg, rgb(var(--t-p)) 0%, rgb(var(--text-strong)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.shadow-btn-token { box-shadow: var(--shadow-btn-primary); }
.shadow-brand-sm { box-shadow: var(--shadow-brand-sm); }
.shadow-brand-lg { box-shadow: var(--shadow-brand-lg); }
.drop-glow-brand { filter: var(--drop-shadow-brand); }
.glow-success-dot { box-shadow: var(--shadow-success-glow); }

/* ── Badge / Tag ─────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-badge);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
}

.badge-primary { background: rgb(var(--t-p) / 0.10); border-color: rgb(var(--t-p) / 0.20); color: rgb(var(--t-p)); }
.badge-success  { background: rgb(var(--accent-success) / 0.10); border-color: rgb(var(--accent-success) / 0.20); color: rgb(var(--accent-success)); }
.badge-info     { background: rgb(var(--accent-info)    / 0.10); border-color: rgb(var(--accent-info)    / 0.20); color: rgb(var(--accent-info)); }
.badge-tool     { background: rgb(var(--accent-tool)    / 0.10); border-color: rgb(var(--accent-tool)    / 0.20); color: rgb(var(--accent-tool)); }

/* ── Widget Default Colors ─────────────────────────────────────────────────── */
/* Default color values for widget configuration - added to :root below */


/* =============================================================================
   13. LIGHT MODE OVERRIDES
   Applied when <html data-color-scheme="light">.
   Every dark token that changes in light mode is redefined here.
   Sections 1 (typography), 2 (shape), 3 (spacing), 9 (motion), 10 (blur) are identical in
   both modes — only the visual colour/shadow tokens flip.
   ============================================================================= */

html[data-color-scheme="light"] {

    /* 4. ELEVATION — lighter, more diffuse shadows for light surfaces */
    --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-card-hover:  0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-btn:         0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-btn-primary: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-brand-sm:    0 0 20px rgb(var(--t-p) / 0.12);
    --shadow-brand-lg:    0 0 40px rgb(var(--t-p) / 0.15);
    --shadow-success-glow: 0 0 8px rgb(var(--accent-success) / 0.20);
    --drop-shadow-brand:  drop-shadow(0 0 8px rgb(var(--t-p) / 0.15));
    --shadow-dropdown:    0 8px 24px rgba(0, 0, 0, 0.10);

    /* 5. SEMANTIC ACCENT TEXT — darker for readability on tinted light bg */
    --accent-success-text:   5 150 105;   /* emerald-600 */
    --accent-info-text:      8 145 178;   /* cyan-600    */
    --accent-tool-text:    109  40 217;   /* violet-700  */
    --accent-warning-text: 180  83   9;   /* amber-700   */
    --accent-danger-text:  185  28  28;   /* red-700     */

    /* 6. SURFACE COLORS — light palette (darkest → lightest reversed) */
    --surface-page:   248 248 249;  /* #f8f8f9  body background           */
    --surface-card:   255 255 255;  /* #ffffff  standard card              */
    --surface-overlay:245 245 246;  /* #f5f5f6  slightly off-white         */
    --surface-raised: 244 244 245;  /* #f4f4f5  raised / hover target      */
    --surface-active: 228 228 231;  /* #e4e4e7  active / selected state    */
    --surface-border: 212 212 216;  /* #d4d4d8  hard border (non-black)    */

    /* 7. TEXT COLORS — inverted: dark text on light background */
    --text-strong:      9   9  11;  /* zinc-950  headings / emphasis       */
    --text-default:    24  24  27;  /* zinc-900  body copy                 */
    --text-muted:      63  63  70;  /* zinc-700  de-emphasized text        */
    --text-soft:       76  76  85;  /* darker for small labels in light UI */
    --text-faint:      96  96 106;  /* improves readability of helper copy */
    --text-ghost:     126 126 136;  /* keeps low emphasis without washout  */

    /* 7. BORDER ALPHAS — black-on-light borders */
    --border-faint:    rgba(0, 0, 0, 0.04);
    --border-subtle:   rgba(0, 0, 0, 0.07);
    --border-muted:    rgba(0, 0, 0, 0.10);
    --border-standard: rgba(0, 0, 0, 0.12);
    --border-moderate: rgba(0, 0, 0, 0.18);
    --border-strong:   rgba(0, 0, 0, 0.26);

    --border-a-faint:    0.04;
    --border-a-subtle:   0.07;
    --border-a-muted:    0.10;
    --border-a-standard: 0.12;
    --border-a-moderate: 0.18;
    --border-a-strong:   0.26;

    /* 11. SCROLLBAR */
    --scrollbar-thumb:       rgba(0, 0, 0, 0.12);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
}
.badge-muted    { background: var(--border-subtle); border-color: var(--border-standard); color: rgb(var(--text-soft)); }

/* ── Gradient Presets ───────────────────────────────────────────────────────── */
.gradient-preset-indigo-violet { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gradient-preset-blue-cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.gradient-preset-rose-orange { background: linear-gradient(135deg, #f43f5e, #f97316); }
.gradient-preset-pink-purple { background: linear-gradient(135deg, #ec4899, #a855f7); }
.gradient-preset-emerald-teal { background: linear-gradient(135deg, #10b981, #14b8a6); }
.gradient-preset-amber-rose { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
.gradient-preset-lime-emerald { background: linear-gradient(135deg, #84cc16, #10b981); }
.gradient-preset-sky-indigo { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.gradient-preset-orange-pink { background: linear-gradient(135deg, #f97316, #ec4899); }
.gradient-preset-sunset { background: linear-gradient(135deg, #ff6b6b, #feca57); }

/* ── Page Card ───────────────────────────────────────────────────────────── */
/* Standard card container — replaces raw bg-[#0c0c0e] / bg-zinc-900 / bg-card
   Provides: border, background, shadow. Pair with Tailwind for radius/layout. */
.page-card {
    border: 1px solid var(--border-standard);
    background: rgb(var(--surface-card));
    box-shadow: var(--shadow-card);
}

/* Translucent / tinted variant — billing balance, settings panels, stat tiles */
.page-card-tint {
    border: 1px solid var(--border-standard);
    background: rgb(var(--surface-raised) / 0.40);
    backdrop-filter: blur(var(--blur-xs));
    -webkit-backdrop-filter: blur(var(--blur-xs));
}

/* ── Card Header Band ────────────────────────────────────────────────────── */
/* Top section of a card with bottom-border separator and subtle tint.
   Provides: border-bottom, background tint. Pair with padding classes. */
.card-header {
    border-bottom: 1px solid var(--border-subtle);
    background: rgb(var(--surface-raised) / 0.35);
}

/* ── Field Input ─────────────────────────────────────────────────────────── */
/* Colour + interaction layer for all form controls.
   Provides: border, bg, color, focus ring, transitions, placeholder color.
   Pair with Tailwind for radius, padding, width, height.                    */
.field-input {
    border: 1px solid var(--border-standard);
    background: rgb(var(--surface-raised) / 0.50);
    color: rgb(var(--text-default));
    outline: none;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.field-input::placeholder           { color: rgb(var(--text-faint)); }
.field-input::selection,
input::selection,
textarea::selection       { background: rgb(var(--t-p) / 0.35); color: rgb(var(--text-strong)); }
.field-input::-moz-selection,
input::-moz-selection,
textarea::-moz-selection  { background: rgb(var(--t-p) / 0.35); color: rgb(var(--text-strong)); }
.field-input:focus {
    border-color: rgb(var(--t-p) / 0.60);
    box-shadow: 0 0 0 3px rgb(var(--t-p) / 0.18);
    background: rgb(var(--surface-raised) / 0.70);
}
.field-input:disabled,
.field-input[readonly]              { opacity: 0.55; cursor: not-allowed; }

/* ── Select override ─────────────────────────────────────────────────────── */
/* Closed-state: line-height fix + a custom chevron painted as a background
   SVG so we can drop ``appearance: none`` (already inherited from
   ``.field-input``) without losing the disclosure indicator the user
   needs. Padding-right reserves room for the chevron so long option
   labels never collide with it.

   The native popup itself (the menu the OS draws when the select is
   open) is NOT stylable cross-browser — Chromium ignores
   ``option { background }`` and Safari paints over it. For places that
   need a fully-controlled menu (like our cap-swap picker), use a custom
   listbox; the inline styles in dashboard.js's ``openSwapPicker`` build
   one without relying on a native ``<select>``. */
select.field-input {
    line-height: normal;
    /* Chevron: stroke uses currentColor so it inherits the field's text
       color in both dark and light modes. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 0.875rem;
    padding-right: 2.25rem;
    cursor: pointer;
}

select.field-input:disabled {
    cursor: not-allowed;
}

/* OS popup tint — best-effort. Chromium honours ``option`` background
   on Linux/Windows; macOS and Safari draw their own menu and will
   ignore most of this. The custom listbox is the only fully reliable
   option for branded popups. */
select.field-input option {
    background-color: rgb(var(--surface-card));
    color: rgb(var(--text-default));
    padding: 0.5rem 0.75rem;
}
select.field-input option:checked,
select.field-input option:hover {
    background-color: rgb(var(--surface-active));
    color: rgb(var(--text-strong));
}

/* ── Field Label ─────────────────────────────────────────────────────────── */
/* Uppercase tracking label above form fields. */
.field-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(var(--text-soft));
}

/* ── Option Tile ─────────────────────────────────────────────────────────── */
/* Clickable card for checkbox/radio selections (protocol toggles, feature
   selectors). Provides: border, bg, hover, checked-state styling.           */
.option-tile {
    border: 1px solid var(--border-subtle);
    background: rgb(var(--surface-raised) / 0.15);
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}
.option-tile:hover                            { background: rgb(var(--surface-raised) / 0.30); }
.option-tile:has(input:checked)              { border-color: rgb(var(--t-p) / 0.40); background: rgb(var(--t-p) / 0.06); }

/* ── Sidebar Item ────────────────────────────────────────────────────────── */
/* Navigation items in setting sidebars and vertical navs.
   Provides: color, hover/active bg, focus. Pair with Tailwind for layout.  */
.sidebar-item {
    color: rgb(var(--text-soft));
    background: transparent;
    cursor: pointer;
    border: none;
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}
.sidebar-item:hover               { color: rgb(var(--text-strong)); background: var(--border-faint); }
.sidebar-item.active,
.sidebar-item[data-active="true"] {
    color: rgb(var(--text-strong));
    background: var(--border-moderate);
    box-shadow: 0 0 0 1px var(--border-moderate);
}

/* ── Data Table ──────────────────────────────────────────────────────────── */
/* Semantic table styles — applied to <table>. All raw thead/tbody Tailwind
   dark utilities on children can be removed after adding this class.        */
.data-table                        { width: 100%; text-align: left; border-collapse: collapse; }
.data-table thead tr               { background: rgb(var(--surface-raised) / 0.40); border-bottom: 1px solid var(--border-subtle); }
.data-table thead th               { padding: 1rem 1.5rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--text-faint)); }
.data-table tbody tr               { border-bottom: 1px solid var(--border-subtle); transition: background-color var(--dur-instant) var(--ease-out); }
.data-table tbody tr:last-child    { border-bottom: none; }
.data-table tbody tr:hover         { background: rgb(var(--surface-raised) / 0.25); }
.data-table td                     { padding: 1rem 1.5rem; color: rgb(var(--text-muted)); }

/* ── Tab Nav Bar (pill / capsule style) ──────────────────────────────────── */
/* Container for pill-shaped tab navigation. Child .tab-btn elements get
   colour and focus from here. Active state is set by JS inline style.      */
.tab-nav-bar {
    background: rgb(var(--surface-raised) / 0.45);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(var(--blur-xs));
    -webkit-backdrop-filter: blur(var(--blur-xs));
    box-shadow: var(--shadow-card);
}
.tab-nav-bar .tab-btn {
    color: rgb(var(--text-soft));
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}
.tab-nav-bar .tab-btn:hover       { color: rgb(var(--text-strong)); background: var(--border-faint); }

/* ── Dropdown Menu ───────────────────────────────────────────────────────── */
/* Canonical definition for all dropdown panels and their children.          */
.dropdown-menu {
    border-radius: var(--radius-popover);
    background: rgb(var(--surface-overlay));
    border: 1px solid var(--border-standard);
    box-shadow: var(--shadow-dropdown);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    overflow: hidden;
}
.dropdown-item,
.dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(var(--text-muted));
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    width: 100%;
    text-align: left;
    transition:
        color var(--dur-instant) var(--ease-out),
        background-color var(--dur-instant) var(--ease-out);
}
.dropdown-item:hover,
.dropdown-menu-item:hover               { background: var(--border-faint); color: rgb(var(--text-strong)); }
.dropdown-item.danger,
.dropdown-menu-item.danger              { color: rgb(var(--accent-danger)); }
.dropdown-item.danger:hover,
.dropdown-menu-item.danger:hover        { background: rgb(var(--accent-danger) / 0.08); }
.dropdown-divider                        { height: 1px; background: var(--border-subtle); margin: 0.25rem 0; }

/* ── Surface Background Utilities ────────────────────────────────────────── */
/* Replaces raw hex values like bg-[#07070a], bg-[#0c0c0e], bg-[#020202] etc.
   Use these classes on root page containers, preview canvases, and
   dark panels. They auto-adapt via light-mode.css Layer-3 overrides.       */
.bg-page-surface  { background-color: rgb(var(--surface-page)); }
.bg-card-surface  { background-color: rgb(var(--surface-card)); }
.border-surface   { border-color: rgb(var(--surface-border)); }

/* ── Toggle Track ────────────────────────────────────────────────────────── */
/* Replaces bg-zinc-800 (track) + after:bg-white (thumb) on all toggle inputs.
   Light-mode.css overrides the after-pseudo track colour automatically.    */
.toggle-track {
    background-color: rgb(var(--surface-active));
    transition: background-color var(--dur-fast) var(--ease-out);
}
.toggle-track:has(input:checked) { background-color: rgb(var(--t-p)); }

/* ── Inverted CTA Button ─────────────────────────────────────────────────── */
/* High-contrast CTA: white fill with dark text. Auto-inverts in light mode.
   Usage: <a class="btn-inverse px-6 py-3 rounded-xl font-semibold">…</a>    */
.btn-inverse {
    background-color: rgb(var(--text-strong));
    color: rgb(var(--surface-page));
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}
.btn-inverse:hover {
    background-color: rgb(var(--text-default));
}

/* ── Ghost Button ────────────────────────────────────────────────────────── */
/* Subtle bordered button for secondary actions.
   Replaces bg-zinc-900 border-white/5 text-zinc-400 hover:text-white hover:bg-zinc-800 */
.btn-ghost {
    background-color: rgb(var(--surface-card));
    border: 1px solid var(--border-subtle);
    color: rgb(var(--text-muted));
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover {
    background-color: rgb(var(--surface-raised));
    border-color: var(--border-standard);
    color: rgb(var(--text-strong));
}

/* ── Hide Scrollbar Utilities ───────────────────────────────────────────────── */
/* Hide scrollbar while maintaining scroll functionality */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar::-webkit-scrollbar-track {
    display: none;
}
.no-scrollbar::-webkit-scrollbar-thumb {
    display: none;
}


/* ── Toaster ─────────────────────────────────────────────────────────────── */
#synapse-toaster {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.synapse-toast {
    pointer-events: all;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-standard);
    background: rgb(var(--surface-card));
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(0.5rem) scale(0.97);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
.synapse-toast--in  { opacity: 1; transform: translateY(0) scale(1); }
.synapse-toast--out { opacity: 0; transform: translateY(0.5rem) scale(0.97); }

/* Icon column */
.synapse-toast__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.05rem;
}
.synapse-toast__icon svg { width: 100%; height: 100%; }

/* Body */
.synapse-toast__body  { flex: 1; min-width: 0; }
.synapse-toast__title { font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: rgb(var(--text-strong)); margin: 0; }
.synapse-toast__desc  { font-size: 0.75rem; color: rgb(var(--text-muted)); margin: 0.2rem 0 0; line-height: 1.4; }

/* Close button */
.synapse-toast__close {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: rgb(var(--text-faint));
    opacity: 0.6;
    transition: opacity 0.15s;
    margin-top: 0.05rem;
}
.synapse-toast__close:hover { opacity: 1; }
.synapse-toast__close svg   { width: 100%; height: 100%; }

/* Variants */
.synapse-toast--success {
    border-color: rgb(var(--accent-success) / 0.30);
    background: rgb(var(--surface-card));
}
.synapse-toast--success .synapse-toast__icon { color: rgb(var(--accent-success)); }

.synapse-toast--error {
    border-color: rgb(var(--accent-danger) / 0.30);
    background: rgb(var(--surface-card));
}
.synapse-toast--error .synapse-toast__icon { color: rgb(var(--accent-danger)); }

.synapse-toast--warning {
    border-color: rgb(var(--accent-warning, 245 158 11) / 0.30);
    background: rgb(var(--surface-card));
}
.synapse-toast--warning .synapse-toast__icon { color: rgb(var(--accent-warning, 245 158 11)); }

.synapse-toast--info .synapse-toast__icon { color: rgb(var(--t-p)); }


/* =============================================================================
   §13. MOTION KILL + CARD POLISH (calm UI mode)
   ─────────────────────────────────────────────────────────────────────────────
   Disables decorative entrance/hover motion globally and gives bento cards
   a solid, readable surface (was a translucent gradient that washed out in
   light mode). Functional transitions on inputs/buttons/dropdowns are kept.

   To re-enable a single motion, override the rule below in a more specific
   stylesheet; do NOT remove this block — it's the project-wide calm baseline.
   ============================================================================ */

/* ── Entrance animations: off ────────────────────────────────────────────── */
.animate-slide-up,
.animate-fade-in,
.animate-slide-up-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ── Hover lift / scale: off ─────────────────────────────────────────────── */
.bento-card {
    /* Solid surface: was a 0.80/0.90 gradient — invisible on light page */
    background: rgb(var(--surface-card)) !important;
    transition: border-color var(--dur-fast) var(--ease-out) !important;
}
.bento-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
    border-color: var(--border-subtle) !important;
}
/* Drop the gradient border glow; flat looks crisper */
.bento-card::after { display: none !important; }

.interactive-scale,
.interactive-scale:hover,
.interactive-scale:active {
    transform: none !important;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out) !important;
}

/* Tailwind group-hover scale on icon tiles — off */
.group:hover .group-hover\:scale-110,
.group:hover .group-hover\:scale-105 {
    transform: none !important;
}

/* Hover translate utilities that fire on cards / tiles — off */
.hover\:-translate-y-1:hover,
.hover\:-translate-y-0\.5:hover,
.hover\:scale-\[1\.02\]:hover,
.hover\:scale-\[1\.01\]:hover {
    transform: none !important;
}

/* Shimmer keyframe on plan CTAs — off */
.shimmer::after { animation: none !important; display: none !important; }

/* ── Light-mode card polish ──────────────────────────────────────────────── */
/* In light mode the card was nearly the same colour as the page; give it a
   real shadow + crisper border so it actually reads as a card. */
html[data-color-scheme="light"] .bento-card {
    background: rgb(var(--surface-card)) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
html[data-color-scheme="light"] .page-card {
    background: rgb(var(--surface-card)) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
html[data-color-scheme="light"] .page-card-tint {
    background: rgb(var(--surface-card)) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-color-scheme="light"] .card-header {
    background: rgb(var(--surface-overlay)) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* Respect OS-level reduced-motion preference too */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
    }
}