/*
 * Torque Rewards — operator dashboard LIGHT-MODE overrides.
 *
 * Each operator-dashboard page defines its own :root CSS variables for
 * the dark aesthetic (--bg #0a0a0a, --ink #f5f1ea, etc.). This file
 * sits on top and swaps them for light-mode values when the user has
 * picked light via the theme toggle (html[data-theme="light"]).
 *
 * How to use: add
 *   <link rel="stylesheet" href="/theme-light.css" />
 * to every operator dashboard page's <head> AFTER the inline <style>
 * block (so the overrides win via cascade order).
 *
 * The 9 operator pages share the same variable names across all their
 * inline stylesheets, so this one file themes every page without any
 * per-page CSS rewrite needed.
 *
 * Known gaps (post-NACS cleanup):
 * - Hardcoded radial-gradient colors in body::before/after rules per page
 * - Hardcoded shadow colors with alpha (rgba(0,0,0,0.4))
 * - A few components with explicit linear-gradient(#0d1a0a, ...) that
 *   won't flip. They'll look muted but readable in light mode.
 */

html[data-theme="light"] {
  /* Core surfaces */
  --bg:        #fdfdf9;
  --bg-1:      #ffffff;
  --bg-2:      #f6faf5;
  --bg-3:      #ebf5ee;

  /* Lines — flip from white-alpha to ink-alpha */
  --line:      rgba(10, 15, 13, 0.08);
  --line-2:    rgba(10, 15, 13, 0.14);
  --line-3:    rgba(10, 15, 13, 0.22);

  /* Ink — flip from cream to near-black */
  --ink:       #0a0f0d;
  --ink-dim:   #5d6a62;
  --ink-mute:  #8c968f;

  /* Brand ramp — keep green, swap olive/khaki for vivid green */
  --orange:    #16a34a;   /* was olive #4A8E18 — in dark theme this maps to primary brand green */
  --orange-2:  #22c55e;   /* was #5CB91A */
  --amber:     #4ade80;   /* was #7FD425 */
  --ember:     #15803d;   /* was #A8E858 — ember is used for accent text; needs to be dark enough on light bg */

  /* Status colors — adjust red for light bg contrast */
  --green:     #15803d;   /* darker green works better on light */
  --red:       #dc2626;
  --blue:      #2563eb;
  --violet:    #7c3aed;
}

/*
 * ============================================================
 * Component-level overrides for patterns that use hardcoded colors
 * (gradients, shadows, backdrop blurs) rather than CSS variables.
 * These are grouped by component so you can turn individual sections
 * off if a specific override creates a visual regression.
 * ============================================================
 */

/* Body background noise texture — flip overlay to multiply + reduce opacity */
html[data-theme="light"] body::before {
  opacity: 0.08 !important;
  mix-blend-mode: multiply !important;
}

/* Body background green glow — swap from olive to vivid-green tint */
html[data-theme="light"] body::after {
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(34, 197, 94, 0.08), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(34, 197, 94, 0.05), transparent 60%) !important;
}

/* Sticky top bar — backdrop blur with light-mode background */
html[data-theme="light"] .topbar {
  background: rgba(253, 253, 249, 0.85) !important;
}

/* Live/demo mode pills — adjust for contrast on light paper */
html[data-theme="light"] .pill.live {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
html[data-theme="light"] .pill.demo {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #c2410c !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}

/* Conexxus badge in topbar */
html[data-theme="light"] .cx-badge {
  background: rgba(34, 197, 94, 0.06) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #15803d !important;
}
html[data-theme="light"] .cx-badge:hover {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Tab bar — the pill-style nav */
html[data-theme="light"] .tabs {
  background: var(--bg-1) !important;
  border-color: var(--line-2) !important;
}
html[data-theme="light"] .tab.active {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Cards and panels — dark gradients → soft paper gradients */
html[data-theme="light"] .hero-left,
html[data-theme="light"] .hero-right,
html[data-theme="light"] .store-card,
html[data-theme="light"] .criteria-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .activity-card {
  background: linear-gradient(165deg, #ffffff 0%, #f6faf5 100%) !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 12px rgba(10, 15, 13, 0.04), 0 1px 3px rgba(10, 15, 13, 0.03) !important;
}

/* Shadows that use rgba(0,0,0,...) hard-code — subtle on light bg */
html[data-theme="light"] [style*="rgba(0,0,0"] {
  /* Can't selectively override inline shadow styles via CSS. Pages that
   * use inline `style="box-shadow: 0 X rgba(0,0,0,...)"` will keep those
   * shadows and read heavier than ideal on light bg. Minor visual issue;
   * post-NACS cleanup target. */
}

/* Inputs — flip input backgrounds + borders */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--ink-mute) !important;
}

/* Buttons with hardcoded dark backgrounds */
html[data-theme="light"] button.ghost,
html[data-theme="light"] .btn.ghost {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
html[data-theme="light"] button.ghost:hover,
html[data-theme="light"] .btn.ghost:hover {
  border-color: var(--line-3) !important;
}

/* Code blocks and monospace tiles */
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] .mono-tile {
  background: #f6faf5 !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

/* Tables */
html[data-theme="light"] table thead {
  background: #f6faf5 !important;
}
html[data-theme="light"] table thead th {
  color: var(--ink-mute) !important;
  border-color: var(--line-2) !important;
}
html[data-theme="light"] table tbody td {
  color: var(--ink-dim) !important;
  border-color: var(--line) !important;
}

/* The grad-fire brand gradient — stays as green ramp but values flipped */
html[data-theme="light"] {
  --grad-fire: linear-gradient(135deg, #22c55e 0%, #16a34a 40%, #15803d 100%);
}

/* Selection color on light theme */
html[data-theme="light"] ::selection {
  background: #15803d !important;
  color: #ffffff !important;
}

/* Text selection in form elements */
html[data-theme="light"] *::selection {
  background: rgba(34, 197, 94, 0.3) !important;
  color: var(--ink) !important;
}

/* Smooth theme transitions */
html[data-theme="light"] body,
html[data-theme="dark"] body,
html body {
  transition: background-color 0.25s, color 0.25s;
}