/* =============================================================================
   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.45);
    box-shadow: 0 0 0 3px rgb(var(--t-p) / 0.10);
    background: rgb(var(--surface-raised) / 0.70);
}
.field-input:disabled,
.field-input[readonly]              { opacity: 0.55; cursor: not-allowed; }

/* ── Select override ─────────────────────────────────────────────────────── */
/* Restore normal line-height so padding-based height from Tailwind utility   */
/* classes (py-2, py-2.5, etc.) is respected. appearance:none is already set  */
/* by the base .field-input rule; no extra overrides needed here.             */
select.field-input {
    line-height: normal;
}

/* ── 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;
}