/**
 * Omega Color System — project standard (2026-07)
 *
 * One brand primary hue + slate neutrals + semantic status.
 * Primary fallback: Bootstrap-leaning blue #0b6fd6 (near prior Megasys brand;
 * closer to stock BS5 primary without the full default neon).
 *
 * Bootswatch bridge (US-009): brand/surface/border/text/radius/font tokens read
 * var(--bs-*, <Omega fallback>). Theme CSS (omega-bootstrap-*.css) loads BEFORE
 * this file so --bs-* are defined; fallbacks apply when theming is off / missing.
 * --omega-env-* stay fixed hex — never theme-driven.
 *
 * Docs: tasks/bootstrap-5-styling-guide.md | tasks/omega-color-system.md
 */

:root {
  /* ── Primary (reads Bootswatch --bs-primary; fallback = Omega brand) ── */
  --omega-primary: color-mix(in srgb, var(--bs-primary, #0b6fd6) 82%, #000);
  --omega-primary-hover: color-mix(in srgb, var(--bs-primary, #0b6fd6) 68%, #000);
  --omega-primary-active: color-mix(in srgb, var(--bs-primary, #0b6fd6) 56%, #000);
  --omega-primary-soft: color-mix(in srgb, var(--omega-primary) 12%, transparent);
  --omega-primary-ring: color-mix(in srgb, var(--omega-primary) 28%, transparent);
  --omega-primary-contrast: #ffffff;

  /* ── Neutrals (figure/ground) — surface/border/text from Bootstrap body tokens ── */
  --omega-text: var(--bs-body-color, #0f172a);
  --omega-text-muted: var(--bs-secondary-color, #64748b);
  --omega-border: var(--bs-border-color, #e2e8f0);
  --omega-border-subtle: var(--bs-tertiary-bg, #f1f5f9);
  --omega-surface: var(--bs-body-bg, #ffffff);
  --omega-surface-2: var(--bs-secondary-bg, #f8fafc);
  --omega-surface-3: var(--bs-tertiary-bg, #f1f5f9);
  /*
   * Page canvas behind cards — Bootswatch light body is white (--bs-body-bg).
   * Do NOT use --bs-secondary-bg here (that grey made GroupBox headers blend into
   * the page so titles looked "outside" the card). Dark mode remaps below.
   */
  --omega-surface-page: var(--bs-body-bg, #ffffff);

  /*
   * Bootswatch card bridge (GroupBox .bgb / .bgbht) — all Tier-1 themes.
   * NOTE: Bootstrap/Bootswatch define --bs-card-* on `.card`, NOT :root.
   * Mirror the same formulas here so host GroupBoxes theme-follow without
   * requiring a `.card` class on WebForms markup.
   */
  --omega-card-bg: var(--bs-body-bg, #ffffff);
  --omega-card-border-width: var(--bs-border-width, 1px);
  --omega-card-border-color: var(--bs-border-color-translucent, var(--omega-border));
  --omega-card-radius: var(--bs-border-radius, 0.375rem);
  --omega-card-inner-radius: calc(var(--omega-card-radius) - var(--omega-card-border-width, 1px));
  --omega-card-shadow: none;
  /* Bootswatch .card-header uses rgba(body-color-rgb, 0.03); color-mix is reliable
     when --bs-body-color-rgb is missing (kill-switch / partial theme load). */
  --omega-card-cap-bg: color-mix(in srgb, var(--bs-body-color, var(--omega-text)) 3%, var(--bs-body-bg, var(--omega-card-bg)));
  --omega-card-cap-color: var(--bs-body-color, var(--omega-text));
  --omega-card-spacer-y: 1rem;
  --omega-card-spacer-x: 1rem;
  --omega-card-cap-padding-y: 0.5rem;
  --omega-card-cap-padding-x: 1rem;
  --omega-card-title-spacer-y: 0.5rem;

  /* ── Semantic (status only — not brand) ── */
  --omega-success: var(--bs-success, #198754);
  --omega-danger: var(--bs-danger, #dc3545);
  --omega-danger-soft: color-mix(in srgb, var(--omega-danger) 12%, var(--omega-surface));
  --omega-warning: var(--bs-warning, #fd7e14);
  --omega-warning-soft: color-mix(in srgb, var(--bs-warning, #fd7e14) 18%, #fff);
  --omega-info: var(--bs-info, #0dcaf0);

  /*
   * ToggleSwitch tracks (Yes/No + On/Off) — soft status fills, not solid CTA paint.
   * Color theory: reserve pure --omega-primary / --omega-danger for buttons & banners;
   * binary form fields use tinted surface + semantic ink so dense grids stay calm.
   * Dual-encode: handle position + soft fill + label color (not fill alone).
   */
  --omega-toggle-on-bg: color-mix(in srgb, var(--omega-primary) 22%, var(--omega-surface));
  --omega-toggle-on-fg: var(--omega-primary-active); /* dark blue ink on soft blue */
  --omega-toggle-on-border: color-mix(in srgb, var(--omega-primary) 28%, var(--omega-border));
  --omega-toggle-off-bg: var(--omega-surface-3);
  --omega-toggle-off-fg: var(--omega-text-muted);
  --omega-toggle-off-border: var(--omega-border);
  --omega-toggle-no-bg: color-mix(in srgb, var(--omega-danger) 14%, var(--omega-surface));
  --omega-toggle-no-fg: color-mix(in srgb, var(--omega-danger) 72%, var(--omega-text)); /* rose-ink */
  --omega-toggle-no-border: color-mix(in srgb, var(--omega-danger) 26%, var(--omega-border));

  /* ── Environment cues (mega-menu / deploy flavor) — NOT theme-driven ── */
  --omega-env-sandbox: #f08080; /* lightcoral stripe/badge */
  --omega-env-inhouse: #7f5353;
  --omega-env-demo-stripe: #fd7e14;
  /* Sandbox top-nav chrome (modern_sandbox theme) — slate bar, env-distinct from live primary */
  --omega-env-sandbox-bar: #525b61;
  --omega-env-sandbox-bar-hover: #566066;
  --omega-env-sandbox-bar-border: #444444;
  --omega-env-sandbox-bar-contrast: #ffffff;

  /* ── Chrome / type (§7.15.3 dense ops scale) ── */
  /* Cards/inputs follow --bs-border-radius*; buttons may be rounder (Litera) */
  --omega-radius: var(--bs-border-radius, 6px);
  --omega-radius-lg: var(--bs-border-radius-lg, 8px);
  --omega-btn-radius: var(--omega-radius);
  --omega-font: var(--bs-body-font-family, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif);
  --omega-font-size: var(--bs-body-font-size, 13px);              /* body / form / list */
  --omega-font-size-helper: 12px;       /* captions, grid headers, flyout hints */
  --omega-font-size-title: 15px;        /* ~1.2em program title densified */
  /*
   * Nav / mega menus (US-020 — Bootswatch navbar voice + Omega ops density):
   *   Theme CSS emits --omega-theme-nav-* (family/weight/transform/tracking + clamped sizes).
   *   This bridge maps them to --omega-nav-* with Omega defaults when theming is off.
   *   Density clamp: root <= 14px (0.875rem), items 13px, headings 12px.
   *   Mega panel craft (W9-08): soft flyout-family tint + border (not solid primary).
   */
  --omega-nav-font-family: var(--omega-theme-nav-font-family, var(--omega-font));
  /* Root module bar labels */
  --omega-nav-root-font-size: var(--omega-theme-nav-root-font-size, 0.8125rem);
  --omega-nav-root-font-weight: var(--omega-theme-nav-root-font-weight, 500);
  --omega-nav-root-letter-spacing: var(--omega-theme-nav-root-letter-spacing, normal);
  --omega-nav-root-text-transform: var(--omega-theme-nav-root-text-transform, none);
  /* Mega column headers */
  --omega-nav-heading-font-size: var(--omega-theme-nav-heading-font-size, 0.75rem);
  --omega-nav-heading-font-weight: var(--omega-theme-nav-heading-font-weight, 600);
  --omega-nav-heading-letter-spacing: var(--omega-theme-nav-heading-letter-spacing, 0.02em);
  --omega-nav-heading-text-transform: var(--omega-theme-nav-heading-text-transform, uppercase);
  /* Mega / flyout items */
  --omega-nav-item-font-size: var(--omega-theme-nav-item-font-size, 0.8125rem);
  --omega-nav-item-font-weight: var(--omega-theme-nav-item-font-weight, 400);
  --omega-nav-item-letter-spacing: var(--omega-theme-nav-item-letter-spacing, normal);
  --omega-nav-item-text-transform: var(--omega-theme-nav-item-text-transform, none);
  /* Legacy aliases (omega-nav.css / MobileMenu pre-US-020 consumers) */
  --omega-nav-font-size: var(--omega-nav-item-font-size);
  --omega-nav-header-font-size: var(--omega-nav-heading-font-size);
  --omega-mega-bg: color-mix(in srgb, var(--omega-primary) 8%, var(--omega-surface-2));
  --omega-mega-border: color-mix(in srgb, var(--omega-primary) 18%, var(--omega-border));
  --omega-font-weight: 400;             /* body */
  --omega-font-weight-label: 500;       /* form-label */
  --omega-font-weight-title: 600;       /* section / GroupBox / primary btn */
  --omega-line-height: 1.5;
  --omega-line-height-tight: 1.25;
  --omega-shadow: 0 4px 16px rgb(15 23 42 / 0.1);
  --omega-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);

  /* ── Control density (§7.2–7.3) — promote once; appearance/nav consume ── */
  --omega-input-h: 32px;
  --omega-btn-min-height: 34px;
  --omega-btn-pad: 6px 16px;
  --omega-btn-min-width: 96px;
  --omega-space-1: 4px;
  --omega-space-2: 8px;
  --omega-space-3: 12px;
  --omega-space-4: 16px;
  --omega-focus-ring: 0 0 0 3px var(--omega-primary-ring);

  /* ── Rail flyout surface (account lookup / program name popovers) ──
     Figure/ground: pure white working surface + 5% primary wash read as “still white”.
     Sit one step cooler than surface: surface-2 base + ~10% primary so the card
     separates from white content without a loud blue panel. Edge uses a stronger
     primary-mixed border. Shadow is for the *card* (.lsPanel1), not the full-height
     fixed .lsmenupanel shell (that shell is top:32→bottom:0 and would cast a
     full-screen smear). */
  --omega-flyout-bg: color-mix(in srgb, var(--omega-primary) 10%, var(--omega-surface-2));
  --omega-flyout-border: color-mix(in srgb, var(--omega-primary) 22%, var(--omega-border));
  --omega-flyout-shadow: 0 10px 28px rgb(15 23 42 / 0.14), 0 2px 8px rgb(15 23 42 / 0.06);

  /* ── Legacy aliases (Modern / appearance / popup) — single definition ── */
  --om-accent: var(--omega-primary);
  --om-accent-hover: var(--omega-primary-hover);
  --om-accent-soft: var(--omega-primary-soft);
  --om-accent-ring: var(--omega-primary-ring);
  --om-surface: var(--omega-surface);
  --om-surface-2: var(--omega-surface-2);
  --om-border: var(--omega-border);
  --om-text: var(--omega-text);
  --om-text-muted: var(--omega-text-muted);
  --om-radius: var(--omega-radius);
  --om-card-bg: var(--omega-card-bg);
  --om-card-border-color: var(--omega-card-border-color);
  --om-card-radius: var(--omega-card-radius);
  --om-card-cap-bg: var(--omega-card-cap-bg);
  --om-btn-radius: var(--omega-btn-radius);
  --om-font: var(--omega-font);
  --om-shadow: var(--omega-shadow);
  --om-shadow-sm: var(--omega-shadow-sm);
  --om-input-h: var(--omega-input-h);
  --om-row-h-pad: 8px 12px;

  --gp-accent: var(--omega-primary);
  --gp-accent-soft: var(--omega-primary-soft);
  --gp-surface: var(--omega-surface);
  --gp-surface-2: var(--omega-surface-2);
  --gp-border: var(--omega-border);
  --gp-text: var(--omega-text);
  --gp-muted: var(--omega-text-muted);
  --gp-radius: var(--omega-radius-lg);
  --gp-font: var(--omega-font);
  --gp-shadow: var(--omega-shadow-sm);

  /* Do not redefine --bs-* here — theme CSS owns them; omega-* only consumes. */
}

/*
 * Bootswatch radius voice (host chrome reads --omega-* after theme CSS).
 * Cosmo: $enable-rounded: false → square cards/inputs/buttons.
 * Litera: $btn-border-radius: 1.078em → rounder primary CTAs; cards keep theme radii.
 * Compiled omega-bootstrap-cosmo still emits default --bs-border-radius; override here
 * so theme switches match Bootswatch.com (not a second invented system).
 */
html[data-omega-theme="cosmo"] {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
  --omega-radius: 0;
  --omega-radius-lg: 0;
  --omega-card-radius: 0;
  --omega-card-inner-radius: 0;
  --omega-btn-radius: 0;
  --om-radius: 0;
  --om-btn-radius: 0;
  --gp-radius: 0;
}

html[data-omega-theme="litera"] {
  /* Bootswatch Litera _variables.scss $btn-border-radius */
  --omega-btn-radius: 1.078em;
  --om-btn-radius: 1.078em;
}

/**
 * Dark appearance (profile Light/Dark roadmap).
 * Apply: <html data-omega-theme="dark"> or class "omega-theme-dark".
 * With Bootswatch on, data-omega-theme is the theme slug; dark mode uses
 * class omega-theme-dark + data-bs-theme=dark (theme file supplies dark --bs-*).
 *
 * Color theory (ops UI on dark ground)
 * ────────────────────────────────────
 * 1. Three hue systems stay separate: brand blue (interactive only),
 *    semantic traffic lights (status only), achromatic neutrals (structure).
 * 2. Structure elevation is LUMINANCE only — pure charcoal, no blue-slate
 *    cast (#0f172a family). Blue-tinted “navy” headers next to pure black
 *    body read as two products (ViewAccount header looked odd).
 * 3. Figure/ground ladder (~6–8% L* steps), never pure #000 (halation) or
 *    pure #fff content islands on dark chrome:
 *      page (deepest) → surface (work/cards/header body/grid/editor)
 *      → surface-2 (section headers, toolbars, inputs)
 *      → surface-3 (hover / tertiary)
 * 4. Contrast targets (WCAG AA body ≥4.5:1):
 *      text #ededed on surface #171717 ≈ 15:1
 *      muted #b3b3b3 on surface ≈ 8.5:1  (light muted #64748b on navy failed ~3.7)
 *      primary #5aadf0 on surface ≈ 7.4:1
 * 5. Brand is lightened on dark so links/CTAs pop without neon vibration;
 *    ink on solid primary buttons is near-black (primary-contrast).
 * 6. Semantics slightly lifted for dark (readable, not fluorescent).
 */
[data-omega-theme="dark"],
html.omega-theme-dark {
  /* Interactive brand — use Bootswatch's dark-mode lift, not its unchanged raw primary. */
  --omega-primary: var(--bs-primary-text-emphasis, #5aadf0);
  --omega-primary-hover: var(--bs-link-hover-color, #7bbef5);
  --omega-primary-active: color-mix(in srgb, var(--omega-primary) 92%, #000);
  --omega-primary-soft: color-mix(in srgb, var(--omega-primary) 16%, transparent);
  --omega-primary-ring: color-mix(in srgb, var(--omega-primary) 38%, transparent);
  --omega-primary-contrast: #0d0d0d;

  /* Type — high-L primary; muted still AA on surface (not decorative-only) */
  --omega-text: var(--bs-body-color, #ededed);
  --omega-text-muted: var(--bs-secondary-color, #b3b3b3);
  --omega-border: var(--bs-border-color, #3d3d3d);
  --omega-border-subtle: var(--bs-tertiary-bg, #2a2a2a);

  /* Achromatic surface ladder (same chroma, step L only) — fall back when no theme */
  --omega-surface-page: var(--bs-body-bg, #0d0d0d); /* canvas behind content */
  --omega-surface: var(--bs-secondary-bg, #171717);     /* cards, VA header, panels, grid body, note editor */
  --omega-surface-2: var(--bs-tertiary-bg, #222222);   /* GroupBox headers, toolbars, elevated chrome, inputs */
  --omega-surface-3: var(--bs-tertiary-bg, #2e2e2e);   /* hover / alt emphasis (theme has 3 steps; ops #2e2e2e fallback) */

  /* Semantic — outcome only; slightly lifted for dark ground */
  --omega-success: var(--bs-success, #3dd68c);
  --omega-danger: var(--bs-danger, #f08080);
  --omega-danger-soft: color-mix(in srgb, var(--omega-danger) 18%, var(--omega-surface));
  --omega-warning: var(--bs-warning, #f0c14d);
  /* Dark amber wash for toast/banners (not light #fff3cd) */
  --omega-warning-soft: color-mix(in srgb, var(--bs-warning, #f0c14d) 22%, #0d0d0d);
  --omega-info: var(--bs-info, #5ec8f0);

  --omega-toggle-on-bg: color-mix(in srgb, var(--omega-primary) 26%, var(--omega-surface));
  --omega-toggle-on-fg: var(--omega-primary-hover);
  --omega-toggle-on-border: color-mix(in srgb, var(--omega-primary) 38%, var(--omega-border));
  --omega-toggle-off-bg: var(--omega-surface-3);
  --omega-toggle-off-fg: var(--omega-text-muted);
  --omega-toggle-off-border: var(--omega-border);
  --omega-toggle-no-bg: color-mix(in srgb, var(--omega-danger) 18%, var(--omega-surface));
  --omega-toggle-no-fg: var(--omega-danger);
  --omega-toggle-no-border: color-mix(in srgb, var(--omega-danger) 35%, var(--omega-border));

  /* Env cues remain fixed (never var(--bs-*)) */
  --omega-env-sandbox: #b85c5c;
  --omega-env-inhouse: #6b4545;

  --omega-shadow: 0 4px 20px rgb(0 0 0 / 0.45);
  --omega-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
}

/* Prefer tokens for common text when present */
html {
  color-scheme: light;
}

[data-omega-theme="dark"],
html.omega-theme-dark {
  color-scheme: dark;
}