/*
 * EP Team — Theme (light + dark, one file)
 *
 * :root carries light values. .theme-dark re-declares the same names with
 * dark values, scoped to ONE element — not a whole host. EpTeam.Web puts
 * .theme-dark on the sidebar only (content stays light); EpTeam.App puts it
 * on the root wrapper (the whole app stays dark). Same file, same class,
 * different scope — see docs/design-adaptation-plan.md §1.
 *
 * Replaces theme-dark.css + theme-light.css from the previous pass.
 *
 * Contrast against --color-bg (#f1f4f9) / --color-bg-elevated (#ffffff):
 *   --color-text        #16203a  →  ~15:1   (AAA)
 *   --color-text-muted  #4a5670  →  ~7.9:1  (AAA)
 *   --color-text-subtle #616c87  →   4.8:1  (AA, small text floor)
 *   --color-primary     #2f5fd0  →   ~5.4:1 — link/accent, never
 *                                             body text on a light fill.
 * Text on a filled accent uses --color-text-inverse:
 *   #ffffff on --color-table-header #3d5f92  →  6.4:1  (AA)
 *   #ffffff on --color-primary      #2f5fd0  →  ~5.4:1
 *
 * Status tones (critical/at-risk/healthy/info/neutral) are a SEPARATE scale
 * from primary/danger — never reused for buttons. See
 * docs/design-adaptation-plan.md §2.5-2.6 for the full rationale and the
 * status-enum -> tone mapping.
 */

/* ---------------------------------------------------------------- LIGHT --- */
:root {
	/* ── Brand (Brand Book 1.1) ─────────────────────────────────── */
	--color-brand-navy:   #30355a;
	--color-brand-white:  #f6f6f6;
	--color-brand-blue:   #5480c0;
	--color-brand-green:  #71b294;
	--color-brand-yellow: #f4e949;
	--color-brand-red:    #d16a5c;

	--color-primary:       #2f5fd0;
	--color-primary-rgb:   47, 95, 208;
	--color-primary-hover: #2650b8;
	--color-primary-press: #1f429b;
	--color-primary-soft:  rgba(47, 95, 208, 0.10);
	--color-on-primary:    #ffffff;

	--color-success:      var(--color-brand-green);
	--color-success-rgb:  113, 178, 148;
	--color-warning:      var(--color-brand-yellow);
	--color-warning-rgb:  244, 233, 73;
	--color-warning-text: #5a4a00;
	--color-danger:       #c9333b;
	--color-danger-rgb:   201, 51, 59;
	--color-danger-hover: #ac2a31;
	--color-danger-soft:  rgba(201, 51, 59, 0.10);
	--color-danger-on:    #ffffff;
	--color-info:         #2f5fd0;
	--color-info-rgb:     47, 95, 208;

	/* ── Surfaces ───────────────────────────────────────────────── */
	--color-bg:          #f1f4f9;
	--color-bg-elevated: #ffffff;
	--color-bg-raised:   #f7f9fc;
	--color-bg-subtle:   #eef2f8;
	--color-bg-hover:    #e7edf7;
	--color-input-bg:    #ffffff;

	/* ── Text ───────────────────────────────────────────────────── */
	--color-text:          #16203a;
	--color-text-muted:    #4a5670;
	--color-text-subtle:   #616c87;
	--color-text-inverse:  #ffffff;
	--color-text-disabled: rgba(22, 32, 58, 0.45);

	/* ── Lines ──────────────────────────────────────────────────── */
	--color-border:        #d3dbe9;
	--color-border-soft:   #e5eaf3;
	--color-border-strong: #b9c6de;
	--color-border-input:  #d3dbe9;

	/* ── Rows and overlays ──────────────────────────────────────────
	   Solid fills here, where the dark theme uses white washes. */
	--color-row-bg:         transparent;
	--color-row-alt:        rgba(21, 32, 58, 0.016);
	--color-row-hover:      #f7f9fc;
	--color-overlay-subtle: rgba(15, 23, 42, 0.04);
	--color-track:          #e2e8f2;
	--color-scrollbar:       #c4cddd;
	--color-scrollbar-hover: #a9b4c9;

	--color-card-header-bg: rgba(15, 23, 42, 0.04);

	--color-table-header: #3d5f92;

	--color-focus-ring: rgba(47, 95, 208, 0.30);

	/* ── Status tone scale — never reused for buttons ───────────── */
	--color-tone-critical:      #c0333a;
	--color-tone-critical-soft: rgba(192, 51, 58, 0.10);
	--color-tone-critical-line: rgba(192, 51, 58, 0.32);
	--color-tone-at-risk:       #8f5600;
	--color-tone-at-risk-soft:  rgba(143, 86, 0, 0.11);
	--color-tone-at-risk-line:  rgba(143, 86, 0, 0.32);
	--color-tone-healthy:       #14683f;
	--color-tone-healthy-soft:  rgba(20, 104, 63, 0.10);
	--color-tone-healthy-line:  rgba(20, 104, 63, 0.30);
	--color-tone-info:          #2f5fd0;
	--color-tone-info-soft:     rgba(47, 95, 208, 0.10);
	--color-tone-info-line:     rgba(47, 95, 208, 0.28);
	--color-tone-neutral:       #5c6880;
	--color-tone-neutral-soft:  rgba(92, 104, 128, 0.10);
	--color-tone-neutral-line:  rgba(92, 104, 128, 0.28);

	/* ── Badges ─────────────────────────────────────────────────── */
	--color-badge-bg:           rgba(15, 23, 42, 0.05);
	--color-badge-border:       rgba(15, 23, 42, 0.12);
	--color-badge-primary-text: #2a4d8f;
	--color-badge-success-text: #1a6b4a;
	--color-badge-warning-text: #7a5200;
	--color-badge-danger-text:  #9a342c;

	/* ── Extended accent text (admin dashboard tiles) ───────────── */
	--color-accent-green-text:  #065f46;
	--color-accent-amber-text:  #7a5200;
	--color-accent-pink-text:   #9d174d;
	--color-accent-orange-text: #9a3412;
	--color-accent-yellow-text: #854d0e;
	--color-accent-red-text:    #991b1b;

	/* ── Status / system ────────────────────────────────────────── */
	--color-offline:        #ff9800;
	--color-offline-dark:   #f57c00;
	--color-badge-awaiting: #e67e22;
	--color-w3w:            #e11f26;
	--color-error-surface:  #b32121;

	/* ── Calendar legend ────────────────────────────────────────── */
	--color-legend-green: #4caf50;
	--color-legend-amber: #ffc107;
	--color-legend-blue:  #2196f3;

	/* ── Availability ───────────────────────────────────────────── */
	--color-available:     var(--color-brand-green);
	--color-not-available: var(--color-brand-red);
	--color-maybe:         var(--color-brand-yellow);

	/* ── Elevation ──────────────────────────────────────────────── */
	--shadow-sm: 0 1px 2px rgba(21, 32, 58, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 1px 2px rgba(21, 32, 58, 0.05), 0 6px 20px -12px rgba(21, 32, 58, 0.22);
	--shadow-lg: 0 10px 30px rgba(18, 25, 62, 0.12);
	--shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14);
	--shadow-pop: 0 12px 32px -8px rgba(21, 32, 58, 0.24);

	/* ── Bootstrap bindings (derived from the roles above) ──────── */
	--bs-primary:           var(--color-primary);
	--bs-primary-rgb:       var(--color-primary-rgb);
	--bs-success:           var(--color-success);
	--bs-success-rgb:       var(--color-success-rgb);
	--bs-danger:            var(--color-danger);
	--bs-danger-rgb:        var(--color-danger-rgb);
	--bs-warning:           var(--color-warning);
	--bs-warning-rgb:       var(--color-warning-rgb);
	--bs-body-bg:           var(--color-bg);
	--bs-body-color:        var(--color-text);
	--bs-border-color:      var(--color-border);
	--bs-card-bg:           var(--color-bg-elevated);
	--bs-card-color:        var(--color-text);
	--bs-card-border-color: var(--color-border);
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316203a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------------- DARK --- */
.theme-dark {
	--color-brand-navy:   #30355a;
	--color-brand-white:  #f6f6f6;
	--color-brand-blue:   #5480c0;
	--color-brand-green:  #71b294;
	--color-brand-yellow: #f4e949;
	--color-brand-red:    #d16a5c;

	--color-primary:       #4c7df0;
	--color-primary-rgb:   76, 125, 240;
	--color-primary-hover: #3d6bdb;
	--color-primary-press: #3159c4;
	--color-primary-soft:  rgba(76, 125, 240, 0.16);
	--color-on-primary:    #ffffff;

	--color-success:      var(--color-brand-green);
	--color-success-rgb:  113, 178, 148;
	--color-warning:      var(--color-brand-yellow);
	--color-warning-rgb:  244, 233, 73;
	--color-warning-text: #5a4a00;
	--color-danger:       #e5484d;
	--color-danger-rgb:   229, 72, 77;
	--color-danger-hover: #d13f44;
	--color-danger-soft:  rgba(229, 72, 77, 0.14);
	--color-danger-on:    #ffffff;
	--color-info:         #4c7df0;
	--color-info-rgb:     76, 125, 240;

	--color-bg:          #0f1424;
	--color-bg-elevated: #161b2e;
	--color-bg-raised:   #1a1f35;
	--color-bg-subtle:   #212843;
	--color-bg-hover:    #252d4c;
	--color-input-bg:    #131829;

	--color-text:          #f2f5fb;
	--color-text-muted:    #a8b0c4;
	--color-text-subtle:   #8892a6;
	/* Text sitting on a filled accent (primary button, table header) —
	   stays near-white in both themes, unlike --color-text. */
	--color-text-inverse:  #f6f6f6;
	--color-text-disabled: rgba(255, 255, 255, 0.5);

	--color-border:        #2c3454;
	--color-border-soft:   #232b47;
	--color-border-strong: #3a4470;
	/* A dark fill can only differ from a dark surface by so much, so an
	   input is read by its border. Deliberately brighter than
	   --color-border-strong to make fields findable at a glance. */
	--color-border-input:  #3a4470;

	--color-row-bg:         transparent;
	--color-row-alt:        rgba(255, 255, 255, 0.012);
	--color-row-hover:      #1a1f35;
	--color-overlay-subtle: rgba(255, 255, 255, 0.06);
	--color-track:          #232b47;
	--color-scrollbar:       #2c3454;
	--color-scrollbar-hover: #3a4470;

	--color-card-header-bg: rgba(0, 0, 0, 0.25);

	/* Table headers: the plain primary is only 3.72 against light text,
	   under the 4.5 AA threshold. This darker shade clears it while
	   staying clearly separated from the page behind the table. */
	--color-table-header: #3d5f92;

	--color-focus-ring: rgba(76, 125, 240, 0.45);

	--color-tone-critical:      #ff6b6b;
	--color-tone-critical-soft: rgba(255, 107, 107, 0.14);
	--color-tone-critical-line: rgba(255, 107, 107, 0.38);
	--color-tone-at-risk:       #f5a524;
	--color-tone-at-risk-soft:  rgba(245, 165, 36, 0.14);
	--color-tone-at-risk-line:  rgba(245, 165, 36, 0.38);
	--color-tone-healthy:       #3fbf7f;
	--color-tone-healthy-soft:  rgba(63, 191, 127, 0.14);
	--color-tone-healthy-line:  rgba(63, 191, 127, 0.34);
	--color-tone-info:          #7c9bf5;
	--color-tone-info-soft:     rgba(124, 155, 245, 0.14);
	--color-tone-info-line:     rgba(124, 155, 245, 0.32);
	--color-tone-neutral:       #8892a6;
	--color-tone-neutral-soft:  rgba(136, 146, 166, 0.14);
	--color-tone-neutral-line:  rgba(136, 146, 166, 0.30);

	--color-badge-bg:           rgba(255, 255, 255, 0.10);
	--color-badge-border:       rgba(255, 255, 255, 0.22);
	--color-badge-primary-text: #a8c4ea;
	--color-badge-success-text: #9fd4bb;
	--color-badge-warning-text: #f4e949;
	--color-badge-danger-text:  #eda096;

	--color-accent-green-text:  #065f46;
	--color-accent-amber-text:  #7a5200;
	--color-accent-pink-text:   #9d174d;
	--color-accent-orange-text: #9a3412;
	--color-accent-yellow-text: #854d0e;
	--color-accent-red-text:    #991b1b;

	--color-offline:        #ff9800;
	--color-offline-dark:   #f57c00;
	--color-badge-awaiting: #e67e22;
	--color-w3w:            #e11f26;
	--color-error-surface:  #b32121;

	--color-legend-green: #4caf50;
	--color-legend-amber: #ffc107;
	--color-legend-blue:  #2196f3;

	--color-available:     var(--color-brand-green);
	--color-not-available: var(--color-brand-red);
	--color-maybe:         var(--color-brand-yellow);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.30);
	--shadow-md: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.60);
	--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.70);
	--shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.60);

	--bs-primary:           var(--color-primary);
	--bs-primary-rgb:       var(--color-primary-rgb);
	--bs-success:           var(--color-success);
	--bs-success-rgb:       var(--color-success-rgb);
	--bs-danger:            var(--color-danger);
	--bs-danger-rgb:        var(--color-danger-rgb);
	--bs-warning:           var(--color-warning);
	--bs-warning-rgb:       var(--color-warning-rgb);
	--bs-body-bg:           var(--color-bg);
	--bs-body-color:        var(--color-text);
	--bs-border-color:      var(--color-border);
	--bs-card-bg:           var(--color-bg-elevated);
	--bs-card-color:        var(--color-text);
	--bs-card-border-color: var(--color-border);
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f6f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}