/* ============================================================================
   VCAP Console — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the authenticated app's visual language: colour
   roles, spacing, radius, elevation and type. Every component and page style
   consumes these variables; no raw colour or spacing values live in the
   component CSS. Loaded before dashboard.css.

   Colour model
     - Neutrals carry the interface: layered surfaces and a three-step ink
       hierarchy do most of the work.
     - Semantic roles (primary, success, warning, danger, info) communicate
       meaning. Each role has a base, a soft background tint, a border tint and
       an ink colour for text placed on the base.
     - Decorative accents are for categorical/visual variety only (charts,
       tiers, avatars) and never imply state.

   The brand green is the primary/success role. It is used sparingly: primary
   actions and genuine positive states only, never as body text or decoration.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {

    /* -- Neutrals: surfaces ------------------------------------------------ */
    --bg:        #08090c;   /* app canvas */
    --bg-soft:   #0b0d11;   /* inset wells, code blocks */
    --surface:   #101319;   /* panels, cards */
    --surface-2: #151922;   /* nested surfaces, inputs */
    --raised:    #1b212c;   /* hover, emphasised chips */
    --line:      rgba(255, 255, 255, .07);   /* hairline border */
    --line-2:    rgba(255, 255, 255, .12);   /* stronger border, hover */

    /* -- Neutrals: ink (text hierarchy) ------------------------------------ */
    --ink:   #f3f5f8;   /* primary text, numbers */
    --ink-2: #99a2b1;   /* secondary text, labels */
    --ink-3: #5e6776;   /* tertiary text, meta, placeholders */

    /* -- Primary / brand (green) ------------------------------------------- */
    --primary:        #39f368;
    --primary-strong: #2fd85b;   /* hover / pressed */
    --primary-ink:    #05210f;   /* text on a primary fill */
    --primary-soft:   rgba(57, 243, 104, .10);   /* tinted background */
    --primary-tint:   rgba(57, 243, 104, .16);   /* stronger tinted background */
    --primary-line:   rgba(57, 243, 104, .28);   /* tinted border */
    --primary-glow:   rgba(57, 243, 104, .50);   /* active / hover glow shadow */
    --primary-ring:   rgba(57, 243, 104, .15);   /* focus / selection ring */
    --primary-ring-soft: rgba(57, 243, 104, .10);/* subtle focus ring */
    --primary-sheen:  rgba(57, 243, 104, .60);   /* decorative shine highlight */

    /* -- Semantic: success (positive) — shares the brand green ------------- */
    --success:      var(--primary);
    --success-ink:  var(--primary-ink);
    --success-soft: var(--primary-soft);
    --success-line: var(--primary-line);

    /* -- Semantic: warning (attention, pending) --------------------------- */
    --warning:      #ffcf5c;
    --warning-ink:  #2a1e00;
    --warning-soft: rgba(255, 207, 92, .12);
    --warning-line: rgba(255, 207, 92, .30);

    /* -- Semantic: danger (destructive, negative) ------------------------- */
    --danger:      #ff5c7a;
    --danger-ink:  #2a0710;
    --danger-soft: rgba(255, 92, 122, .12);
    --danger-line: rgba(255, 92, 122, .30);
    --danger-well: #2a1116;   /* danger-tinted dark inset (framework error surface) */

    /* -- Semantic: info (neutral emphasis, in-progress) ------------------- */
    --info:      #5b9dff;
    --info-ink:  #04122b;
    --info-soft: rgba(91, 157, 255, .12);
    --info-line: rgba(91, 157, 255, .30);

    /* -- Decorative accents (categorical only, no state meaning) ---------- */
    --accent-violet: #a78bfa;
    --accent-blue:   #5b9dff;
    --accent-amber:  #ffcf5c;
    --accent-pink:   #f472b6;
    --accent-cyan:   #34d3d3;

    /* -- Spacing scale (4px rhythm) --------------------------------------- */
    --space-1: .25rem;   /* 4  */
    --space-2: .5rem;    /* 8  */
    --space-3: .75rem;   /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;   /* 24 */
    --space-7: 2rem;     /* 32 */
    --space-8: 2.5rem;   /* 40 */

    /* -- Semantic spacing (named roles used by components) ---------------- */
    --pad-panel:  var(--space-6);   /* panel / card interior */
    --pad-tight:  var(--space-4);   /* compact panels, popovers */
    --gap-grid:   var(--space-5);   /* gaps between panels in a grid */
    --gap-stack:  var(--space-4);   /* vertical rhythm within a column */

    /* -- Radius ----------------------------------------------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;

    /* -- Elevation -------------------------------------------------------- */
    --shadow-1:     0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 22px -16px rgba(0, 0, 0, .75);
    --shadow-2:     0 1px 0 rgba(255, 255, 255, .05) inset, 0 20px 48px -24px rgba(0, 0, 0, .8);
    --shadow-pop:   0 16px 40px -12px rgba(0, 0, 0, .7);
    --shadow-modal: 0 24px 70px -20px rgba(0, 0, 0, .78);

    /* Shared modal chrome — every dialog (custom .mdl and framework .swal) uses these. */
    --modal-scrim: rgba(4, 6, 9, .62);
    --modal-pad:   var(--space-6);   /* 24px interior padding, equal on all sides */

    /* -- Type ------------------------------------------------------------- */
    --font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Google Sans Flex', 'Inter', sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Type scale */
    --text-xs:   .72rem;
    --text-sm:   .82rem;
    --text-base: .9rem;
    --text-lg:   1rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.6rem;
    --text-3xl:  1.95rem;

    /* ====================================================================
       Compatibility aliases
       Convenience tokens and framework variables mapping onto the semantic
       layer. Prefer the semantic tokens above.
       ==================================================================== */
    --green:      var(--primary);
    --green-ink:  var(--primary-ink);
    --green-soft: var(--primary-soft);
    --green-line: var(--primary-line);
    --up:     var(--success);
    --down:   var(--danger);
    --blue:   var(--accent-blue);
    --violet: var(--accent-violet);
    --amber:  var(--warning);

    --vcap-accent:     var(--primary);
    --vcap-accent-rgb: 57, 243, 104;
    --vcap-surface:    var(--surface);
    --vcap-surface-2:  var(--surface-2);
    --vcap-border:     var(--line);
    --vcap-muted:      var(--ink-2);

    --bs-body-bg:      var(--bg);
    --bb-bg-primary:   var(--bg);
    --bb-bg-card:      var(--surface);
    --bb-border-color: var(--line);
    --bb-text-primary: var(--ink);
    --bb-text-muted:   var(--ink-2);
}

/* ── Theme: Purple Night ─────────────────────────────────────────────── */
[data-bs-theme="dark"][data-accent="purple"] {
    --primary:        #9b59b6;
    --primary-strong: #8e44ad;
    --primary-ink:    #1a0a2e;
    --primary-soft:   rgba(155, 89, 182, .10);
    --primary-tint:   rgba(155, 89, 182, .16);
    --primary-line:   rgba(155, 89, 182, .28);
    --primary-glow:   rgba(155, 89, 182, .50);
    --primary-ring:   rgba(155, 89, 182, .15);
    --primary-ring-soft: rgba(155, 89, 182, .10);
    --primary-sheen:  rgba(155, 89, 182, .60);
    --vcap-accent-rgb: 155, 89, 182;
}

/* ── Theme: Gold ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"][data-accent="gold"] {
    --primary:        #f1c40f;
    --primary-strong: #d4ac0d;
    --primary-ink:    #2a1e00;
    --primary-soft:   rgba(241, 196, 15, .10);
    --primary-tint:   rgba(241, 196, 15, .16);
    --primary-line:   rgba(241, 196, 15, .28);
    --primary-glow:   rgba(241, 196, 15, .50);
    --primary-ring:   rgba(241, 196, 15, .15);
    --primary-ring-soft: rgba(241, 196, 15, .10);
    --primary-sheen:  rgba(241, 196, 15, .60);
    --vcap-accent-rgb: 241, 196, 15;
}

/* ── Theme: Sky (Light + Blue) ───────────────────────────────────────── */
[data-bs-theme="light"][data-accent="sky"],
[data-bs-theme="light"]:not([data-accent]) {
    --bg:        #f5f8fa;
    --bg-soft:   #edf1f5;
    --surface:   #ffffff;
    --surface-2: #f0f2f5;
    --raised:    #e8ecf0;
    --line:      rgba(0, 0, 0, .08);
    --line-2:    rgba(0, 0, 0, .14);
    --ink:       #1a1c20;
    --ink-2:     #5e6776;
    --ink-3:     #8a92a0;
    --primary:        #0099ff;
    --primary-strong: #007acc;
    --primary-ink:    #ffffff;
    --primary-soft:   rgba(0, 153, 255, .08);
    --primary-tint:   rgba(0, 153, 255, .14);
    --primary-line:   rgba(0, 153, 255, .22);
    --primary-glow:   rgba(0, 153, 255, .30);
    --primary-ring:   rgba(0, 153, 255, .12);
    --primary-ring-soft: rgba(0, 153, 255, .06);
    --primary-sheen:  rgba(0, 153, 255, .40);
    --vcap-accent-rgb: 0, 153, 255;
}

/* ── Theme: Rose Dawn (Light + Pink) ────────────────────────────────── */
[data-bs-theme="light"][data-accent="rose-dawn"] {
    --bg:        #fff5f7;
    --bg-soft:   #ffedf0;
    --surface:   #ffffff;
    --surface-2: #fff0f3;
    --raised:    #ffe0e6;
    --line:      rgba(0, 0, 0, .06);
    --line-2:    rgba(0, 0, 0, .12);
    --ink:       #2d1b22;
    --ink-2:     #7a5664;
    --ink-3:     #a0848e;
    --primary:        #e84393;
    --primary-strong: #d63384;
    --primary-ink:    #ffffff;
    --primary-soft:   rgba(232, 67, 147, .08);
    --primary-tint:   rgba(232, 67, 147, .14);
    --primary-line:   rgba(232, 67, 147, .22);
    --primary-glow:   rgba(232, 67, 147, .30);
    --primary-ring:   rgba(232, 67, 147, .12);
    --primary-ring-soft: rgba(232, 67, 147, .06);
    --primary-sheen:  rgba(232, 67, 147, .40);
    --vcap-accent-rgb: 232, 67, 147;
}

/* ── Theme: Golden Hour (Light + Gold) ──────────────────────────────── */
[data-bs-theme="light"][data-accent="golden-hour"] {
    --bg:        #fffbf0;
    --bg-soft:   #fff5e0;
    --surface:   #ffffff;
    --surface-2: #fff8ea;
    --raised:    #ffefc2;
    --line:      rgba(0, 0, 0, .06);
    --line-2:    rgba(0, 0, 0, .12);
    --ink:       #332a10;
    --ink-2:     #806c30;
    --ink-3:     #ab9660;
    --primary:        #c9940a;
    --primary-strong: #b08209;
    --primary-ink:    #ffffff;
    --primary-soft:   rgba(201, 148, 10, .08);
    --primary-tint:   rgba(201, 148, 10, .14);
    --primary-line:   rgba(201, 148, 10, .22);
    --primary-glow:   rgba(201, 148, 10, .30);
    --primary-ring:   rgba(201, 148, 10, .12);
    --primary-ring-soft: rgba(201, 148, 10, .06);
    --primary-sheen:  rgba(201, 148, 10, .40);
    --vcap-accent-rgb: 201, 148, 10;
}