/* =============================================================
   Violet - the platform's original brand theme (key "ez-platform")
   Scope: [data-theme-brand="ez-platform"] on <html>

   A brand theme is TOKENS ONLY: a light block and a dark block that each carry the full token set.
   Every component rule that reads these lives in the platform bundle (ez-platform.css and friends),
   so a new theme is a copy of this file with new values - nothing else to edit. Register it with
   AddBrandTheme (see PlatformBrandThemes); BrandThemeTokenTests checks every theme carries every token.

   Light mode vars applied at attribute specificity (0,1,0).
   Dark overrides at (0,2,0) - always win over Bootstrap's [data-bs-theme="dark"].
   ============================================================= */

/* ── Light palette ──────────────────────────────────────────── */
[data-theme-brand="ez-platform"] {

    /* ── Elevation scale (overrides Bootstrap's tiers) ─────────────
       Every raised surface (dropdowns, menus, popovers, toasts, modals,
       lightboxes, drag ghosts) references ONE of these three tokens - never
       a hand-rolled box-shadow. Values are the brand's softer, flat-friendly
       take on Bootstrap's defaults, re-declared per theme because a dark
       surface needs a heavier shadow than a light one. To flatten the whole
       app, set all three to `none` here. */
    --bs-box-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --bs-box-shadow:    0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    --bs-box-shadow-lg: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);

    /* ── Focus ring (overrides Bootstrap's tokens) ─────────────────
       Bootstrap's stock --bs-focus-ring-color is a literal blue at 0.25rem;
       we point it at the brand primary at 3px so EVERY focus ring - Bootstrap's
       own :focus-visible / .focus-ring, our form fields, pagination, input
       groups - is one brand-consistent halo. --ez-focus-ring is the box-shadow
       alias for rules that apply the ring directly. */
    --bs-focus-ring-width:   0.1875rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color:   rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
    --ez-focus-ring:         0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);

    /* ── No Bootstrap equivalent (keep as custom) ─────────────── */
    --border-strong:   #a99dd0;
    --ez-shadow-knob:  0 1px 3px rgba(0, 0, 0, .3);

    /* ── Bootstrap color tokens ────────────────────────────────── */
    --bs-primary:          #af85ff;
    --bs-primary-rgb:      175, 133, 255;
    --bs-secondary:        #6c757d;
    --bs-secondary-rgb:    108, 117, 125;
    --bs-success:          #198754;
    --bs-success-rgb:       25, 135,  84;
    --bs-warning:          #ffc107;
    --bs-warning-rgb:      255, 193,   7;
    --bs-danger:           #dc3545;
    --bs-danger-rgb:       220,  53,  69;
    --bs-info:             #0dcaf0;
    --bs-info-rgb:          13, 202, 240;

    /* ── Text on a filled primary surface (filled buttons, pressed toolbar buttons, primary badges).
       White on this violet is the original look; a theme whose primary is light uses a dark ink. */
    --ez-on-primary:       #ffffff;

    /* ── Bootstrap text tokens ─────────────────────────────────── */
    --bs-body-color:       #0c1a2e;
    --bs-secondary-color:  #5a4a7a;
    --bs-tertiary-color:   #3a2d60;

    /* ── Bootstrap surface tokens ──────────────────────────────── */
    --bs-body-bg:              #ffffff;
    --bs-body-bg-rgb:          255, 255, 255;
    --bs-secondary-bg:         #ede9f7;
    --bs-secondary-bg-rgb:     237, 233, 247;
    --bs-tertiary-bg:          #e4dff2;
    --bs-tertiary-bg-rgb:      228, 223, 242;

    /* ── Sidebar (the app's side menu) ─────────────────────────────
       The original look keeps the sidebar on the page surface. A theme with a coloured or dark
       sidebar sets these to its own values (and DarkSidebar on its BrandTheme registration, which
       swaps in the dark logo there). */
    --ez-side-bg:          var(--bs-body-bg);
    --ez-side-fg:          var(--bs-tertiary-color);
    --ez-side-muted:       var(--bs-secondary-color);
    --ez-side-hover-bg:    rgba(var(--bs-primary-rgb), .08);
    --ez-side-active-bg:   rgba(var(--bs-primary-rgb), .13);
    --ez-side-active-fg:   var(--bs-primary);
    --ez-side-border:      var(--bs-border-color);

    /* ── Brand "subtle" surface tokens ─────────────────────────────
       Bootstrap ships these as literals derived from ITS default blue, so rebranding
       --bs-primary alone leaves .bg-primary-subtle / .border-primary-subtle /
       .text-primary-emphasis (and .alert-primary, .accordion active) off-brand. Deriving
       them from the brand token keeps every subtle surface on-brand, and a derived app
       brand that retints --bs-primary gets matching surfaces for free.
       Only primary needs this: success/warning/danger/info keep Bootstrap's own hues, so
       Bootstrap's own subtle values for those still match. */
    --bs-primary-bg-subtle:     color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 34%, var(--bs-body-bg));
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 70%, #000);

    /* ── Bootstrap border / link tokens ────────────────────────── */
    --bs-border-color:       #ccc5e8;
    /* Links derive from the single brand token, darkened for readable contrast on the
       light (white) surface; hover darkens further for affordance. */
    --bs-link-color:         color-mix(in srgb, var(--bs-primary) 70%, #000);
    --bs-link-color-rgb:     var(--bs-primary-rgb);
    --bs-link-hover-color:   color-mix(in srgb, var(--bs-primary) 50%, #000);
    --bs-code-color:         var(--bs-primary);

    /* ── Bootstrap component tokens ────────────────────────────── */
    --bs-card-bg:            var(--bs-body-bg);
    --bs-card-border-color:  var(--bs-border-color);
    --bs-card-cap-bg:        transparent;
    --bs-modal-bg:           var(--bs-body-bg);
    --bs-modal-border-color: var(--border-strong);
    /* The two Inter Fallback families are metric-matched stand-ins (ez-platform-fonts.css) so text does
       not reflow when Inter swaps in. Keep them directly after 'Inter'. */
    --bs-body-font-family: 'Inter', 'Inter Fallback Roboto', 'Inter Fallback Arial', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Single monospace stack for the whole app (code blocks, diffs, shortcuts, IDs).
       Bootstrap consumes this token for <code>/<pre>; custom rules use var(--bs-font-monospace). */
    --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* ── Corners (Bootstrap's own scale, "option B" in ez-platform.css) ── */
    --bs-border-radius-sm:   0.25rem;
    --bs-border-radius:      0.375rem;
    --bs-border-radius-lg:   0.5rem;
    --bs-border-radius-xl:   1rem;
    --bs-border-radius-pill: 50rem;

    color-scheme: light;
}

/* ── Dark palette override ──────────────────────────────────── */
/* Deliberately carries the FULL token set - including tokens whose values equal
   the base block - so this block is a complete, self-contained template that a
   derived app brand can copy and retheme token-by-token without cross-referencing
   the light block. Do not trim the duplicates.
   Two selectors: <html> in dark mode, AND any element inside the page that pins itself dark
   (the sign-in shell, the signing page, VCR's result panels). Without the second, such an element
   fell back to Bootstrap's stock dark palette instead of this theme's. Every theme repeats both. */
[data-theme-brand="ez-platform"][data-bs-theme="dark"],
[data-theme-brand="ez-platform"] [data-bs-theme="dark"] {

    /* ── Elevation scale (dark values; see light block) ──────────── */
    --bs-box-shadow-sm: 0 2px 10px rgba(0,0,0,.4);
    --bs-box-shadow:    0 8px 28px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.4);
    --bs-box-shadow-lg: 0 14px 44px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.4);

    /* ── Focus ring (dark - a touch stronger; see light block) ───── */
    --bs-focus-ring-width:   0.1875rem;
    --bs-focus-ring-opacity: 0.35;
    --bs-focus-ring-color:   rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
    --ez-focus-ring:         0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);

    /* ── No Bootstrap equivalent ───────────────────────────────── */
    --border-strong:   #42424d;
    --ez-shadow-knob:  0 1px 3px rgba(0, 0, 0, .55);

    /* ── Bootstrap color tokens ────────────────────────────────── */
    --bs-primary:          #af85ff;
    --bs-primary-rgb:      175, 133, 255;
    --bs-secondary:        #6c757d;
    --bs-secondary-rgb:    108, 117, 125;
    --bs-success:          #198754;
    --bs-success-rgb:       25, 135,  84;
    --bs-warning:          #ffc107;
    --bs-warning-rgb:      255, 193,   7;
    --bs-danger:           #dc3545;
    --bs-danger-rgb:       220,  53,  69;
    --bs-info:             #0dcaf0;
    --bs-info-rgb:          13, 202, 240;

    --ez-on-primary:       #ffffff;

    /* ── Bootstrap text tokens ─────────────────────────────────── */
    --bs-body-color:       #fafafa;
    --bs-secondary-color:  #a1a1aa;
    --bs-tertiary-color:   #d4d4d8;
    /* Bootstrap uses --bs-emphasis-color-rgb for table text, hover/stripe overlays.
       [data-bs-theme=dark] flips these to white; we must mirror that here. */
    --bs-emphasis-color:     #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    /* ── Bootstrap surface tokens ──────────────────────────────── */
    /* All three surfaces are pure black. Every other surface in the product derives from
       these (card, modal, accordion, pagination, table chrome, the map widget), and form
       fields already shared --bs-body-bg with the page, so separation is carried by the
       1px border rather than a fill. The previous near-black ramp was
       #141416 / #0d0d0f / #09090b - restore those three if the flat black reads too dark. */
    --bs-body-bg:              #000000;
    --bs-body-bg-rgb:          0, 0, 0;
    --bs-secondary-bg:         #000000;
    --bs-secondary-bg-rgb:     0, 0, 0;
    --bs-tertiary-bg:          #000000;
    --bs-tertiary-bg-rgb:      0, 0, 0;

    /* ── Sidebar (dark; see light block) ───────────────────────── */
    --ez-side-bg:          var(--bs-body-bg);
    --ez-side-fg:          var(--bs-tertiary-color);
    --ez-side-muted:       var(--bs-secondary-color);
    --ez-side-hover-bg:    rgba(var(--bs-primary-rgb), .08);
    --ez-side-active-bg:   rgba(var(--bs-primary-rgb), .13);
    --ez-side-active-fg:   var(--bs-primary);
    --ez-side-border:      var(--bs-border-color);

    /* ── Brand "subtle" surface tokens (dark; see light block) ──── */
    /* Slightly less brand and a darker ground than the light block, so the result is a
       muted "blacky purple" that lifts off the card without glowing. */
    --bs-primary-bg-subtle:     color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-body-bg));
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 70%, #fff);

    /* ── Bootstrap border / link tokens ────────────────────────── */
    --bs-border-color:       #2e2e35;
    /* On the dark surface the brand token reads well as-is; hover lightens for affordance. */
    --bs-link-color:         var(--bs-primary);
    --bs-link-color-rgb:     var(--bs-primary-rgb);
    --bs-link-hover-color:   color-mix(in srgb, var(--bs-primary) 70%, #fff);
    --bs-code-color:         var(--bs-primary);

    /* ── Bootstrap component tokens ────────────────────────────── */
    --bs-card-bg:            var(--bs-body-bg);
    --bs-card-border-color:  var(--bs-border-color);
    --bs-card-cap-bg:        transparent;
    --bs-modal-bg:           var(--bs-body-bg);
    --bs-modal-border-color: var(--border-strong);
    --bs-body-font-family: 'Inter', 'Inter Fallback Roboto', 'Inter Fallback Arial', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --bs-border-radius-sm:   0.25rem;
    --bs-border-radius:      0.375rem;
    --bs-border-radius-lg:   0.5rem;
    --bs-border-radius-xl:   1rem;
    --bs-border-radius-pill: 50rem;

    color-scheme: dark;
}