/* ═══════════════════════════════════════════════════════════════
   AIERP LIGHT THEME — tone 3 of 5: dimmed, near-neutral (default)
   Counterpart of default-theme.css: the same tokens and the same rules,
   inverted for a light surface, scoped to html[data-theme="light"] so the dark
   theme stays the default.

   Exactly ONE tone file is loaded at a time — the layout picks it from
   localStorage['aierp-theme-tone'] (Aierp.stepThemeTone()). Tones differ ONLY
   in the neutrals of section 1; accent, semantic colours and every rule from
   section 2 down are identical in all 5 files, so a fix to any of them
   has to be made in all 5.

   The ladder runs lightest → dimmest and coolest → warmest, but not on both
   axes at once: 1→2 only drops the brightness (both are cool grey), 2→5
   only adds warmth (all are equally dim). The accent stays the violet/blue of
   img/logo.png (#a17eff / #7188d6) in every tone.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — only what differs from the dark theme
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  /* ── Core palette. --aierp-surface decides how bright the app feels, because
     tables and cards cover most of the screen; only --aierp-surface-overlay
     goes near-white, which is what makes pop-overs read as raised. ── */
  --aierp-bg: #e0dedd;
  --aierp-bg-alt: #d8d5d4;
  --aierp-surface: #f2f1f0;
  --aierp-surface-elevated: #e8e6e5;
  --aierp-surface-overlay: #f9f8f7;

  /* ── Borders: a notch stronger than the dark theme's, because a muted light
     surface separates by line, not by brightness step ── */
  --aierp-border: rgba(42, 40, 39, .14);
  --aierp-border-strong: rgba(42, 40, 39, .22);
  --aierp-border-focus: rgba(107, 70, 229, .45);

  /* ── Text hierarchy: the neutral follows the surface, not the accent — text
     of the opposite temperature over the page reads as a mismatch ── */
  --aierp-text: #242221;
  --aierp-text-secondary: #585554;
  --aierp-text-tertiary: #6d6a69;
  --aierp-text-inverse: #fff;

  /* ── Brand system: dual accent. `-light` is the variant that has to stand
     out against the page, so here it is the DARKER violet, not the paler one. ── */
  --aierp-accent: #7c5cf0;
  --aierp-accent-light: #6b46e5;
  --aierp-accent-glow: rgba(124, 92, 240, .26);
  --aierp-accent-secondary: #c2410c;
  --aierp-accent-secondary-glow: rgba(194, 65, 12, .20);

  /* ── Semantic colors: the 700-level shades, so badge and stat text keeps
     ~4.5:1 against a light card ── */
  --aierp-green: #15803d;
  --aierp-green-bg: rgba(21, 128, 61, .10);
  --aierp-amber: #b45309;
  --aierp-amber-bg: rgba(180, 83, 9, .11);
  --aierp-red: #d12442;
  --aierp-red-bg: rgba(209, 36, 66, .08);
  --aierp-blue: #0369a1;
  --aierp-blue-bg: rgba(3, 105, 161, .09);

  /* ── Semantic backgrounds (reused outside CSS too — see public/js/aierp.js) ── */
  --aierp-accent-bg: rgba(124, 92, 240, .1);
  --aierp-accent-secondary-bg: rgba(194, 65, 12, .11);

  /* ── Extended palette (gradient stops / one-off shades) ──
     --aierp-white stays #fff: it is the text on accent-filled controls, not a
     surface. --aierp-accent-lighter is the logo blue, so the brand wordmark
     gradient runs violet→blue exactly like img/logo.png. --aierp-surface-deep
     stays dark on purpose — it is the fly-out tooltip, which reads as a dark
     chip over light content. */
  --aierp-accent-deep: #5b3fd0;
  --aierp-accent-lighter: #5f79cf;
  --aierp-green-deep: #116232;
  --aierp-text-table: #1b1a19;
  --aierp-text-muted-alt: #625f5e;
  --aierp-surface-deep: #272525;
  --aierp-nav-open-bg: rgb(239 237 250);
  --aierp-nav-open-bg-collapsed: rgb(247 245 245);
  --aierp-green-soft-bg: rgba(21, 128, 61, .07);
  --aierp-red-soft-bg: rgba(209, 36, 66, .06);

  /* ── RGB triplets. Two of them carry a different meaning here than the name
     suggests, because aierp.css consumes them by role, not by colour:
     --aierp-white-rgb is the low-alpha tint that lifts a surface off its
     background (hover, striped rows, read-only fields) — lifting on a light
     surface means tinting DOWN, so it holds the dark ink;
     --aierp-black-rgb is the shadow colour, and the alphas baked into
     aierp.css (.3–.6) would read as soot under a light UI, so it holds a
     mid grey that lands those same alphas in the usual light-theme range. ── */
  --aierp-white-rgb: 42 40 39;
  --aierp-black-rgb: 157 156 155;
  --aierp-accent-rgb: 124 92 240;
  --aierp-accent-secondary-rgb: 194 65 12;
  --aierp-red-rgb: 209 36 66;
  --aierp-green-rgb: 21 128 61;
  --aierp-amber-rgb: 180 83 9;
  --aierp-blue-rgb: 3 105 161;
  --aierp-surface-rgb: 242 241 240;
  --aierp-muted-rgb: 93 89 89;
}

/* ═══════════════════════════════════════════════════════════════
   2. BOOTSTRAP OVERRIDES — the ones default-theme.css states as literals
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] .app-wrapper {
  --bs-table-hover-bg: rgb(var(--aierp-accent-rgb) / .05);
  --bs-table-striped-bg: rgb(var(--aierp-white-rgb) / .022);
  --bs-table-active-bg: rgb(var(--aierp-accent-rgb) / .09);
  --bs-dropdown-link-hover-bg: rgb(var(--aierp-white-rgb) / .05);
  --bs-list-group-action-hover-bg: rgb(var(--aierp-white-rgb) / .03);
  --bs-nav-tabs-link-active-color: var(--aierp-text);
  --bs-btn-close-color: var(--aierp-text);
}

/* ═══════════════════════════════════════════════════════════════
   3. ACTIVE STATES — white-on-dark text that needs the opposite here
   Every one of these sits on a transparent or 10%-accent background, where
   var(--aierp-white) was the max-contrast choice against the dark page.
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .page-tab.active,
html[data-theme="light"] .aierp-tab-btn.active,
html[data-theme="light"] .sidebar-nav-section.active .sidebar-nav-trigger,
html[data-theme="light"] .sidebar-nav-item.active,
html[data-theme="light"] .sidebar-nav-dropdown-item.active,
html[data-theme="light"] .progress-step.active,
html[data-theme="light"] .wizard-step-item.active .wizard-step-label {
  color: var(--aierp-text);
}

/* Clipped-text gradient — the dark theme starts it at white, which would be
   invisible here; the same idea inverted is text colour → accent. */
html[data-theme="light"] .summary-total {
  background: linear-gradient(135deg, var(--aierp-text), var(--aierp-accent-light));
}

/* ═══════════════════════════════════════════════════════════════
   4. HOVER / FIELD STATES — surface-overlay is white here, so the controls
   that used it as a hover tint would land white-on-white
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] .sidebar-toggle:hover,
html[data-theme="light"] .stats-picker-btn:hover,
html[data-theme="light"] .ai-panel-actions button:hover,
html[data-theme="light"] .aierp-calendar-header button:hover,
html[data-theme="light"] .aierp-calendar-day:hover,
html[data-theme="light"] .form-group .form-select:focus {
  background: rgb(var(--aierp-white-rgb) / .05);
}

/* A field the user cannot type in has to look it — .015 disappears on white. */
html[data-theme="light"] .form-group .form-control:read-only,
html[data-theme="light"] .form-group .form-select:disabled {
  background: rgb(var(--aierp-white-rgb) / .045);
}

/* Dialog scrim: the shadow slate is too pale to dim a light page. */
html[data-theme="light"] .aierp-modal-backdrop {
  background: rgb(var(--aierp-white-rgb) / .38);
}

/* ═══════════════════════════════════════════════════════════════
   5. STATUS BADGES — neutral fills and the borders default-theme.css
   pins to the dark palette
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] .aierp-badge-draft,
html[data-theme="light"] .aierp-badge-cancelled,
html[data-theme="light"] .aierp-badge-inactive {
  background: rgb(var(--aierp-white-rgb) / .05);
}
html[data-theme="light"] .aierp-badge-posted,
html[data-theme="light"] .aierp-badge-active {
  border-color: rgb(var(--aierp-green-rgb) / .25);
}
html[data-theme="light"] .aierp-badge-pending {
  border-color: rgb(var(--aierp-amber-rgb) / .25);
}
html[data-theme="light"] .aierp-badge-rejected {
  border-color: rgb(var(--aierp-red-rgb) / .25);
}
html[data-theme="light"] .aierp-badge-processing {
  border-color: rgb(var(--aierp-blue-rgb) / .25);
}

/* ═══════════════════════════════════════════════════════════════
   6. STATS GRID — icon chips whose tint default-theme.css states as a literal
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] .stat-icon--purple {
  background: rgb(var(--aierp-accent-rgb) / .12);
  color: var(--aierp-accent-light);
}
html[data-theme="light"] .stat-icon--amber {
  background: rgb(var(--aierp-accent-secondary-rgb) / .12);
  color: var(--aierp-accent-secondary);
}