/* ─────────────────────────────────────────────────────────────
   CapraSEO — light theme
   Loaded AFTER theme.css on every page. Every rule is scoped under
   html[data-theme="light"], so with the attribute absent (the default)
   this file is completely inert and dark mode is untouched.

   The theme is the dark language inverted, not a generic light skin:
     • white cards raised off a violet-tinted off-white canvas
     • text is violet-inked near-black (never #000), same ladder logic
     • hairlines are low-alpha INK (the --wash-rgb pivot flips every
       white wash in the app to violet ink in one variable)
     • elevation returns as soft, violet-tinted shadow
     • the indigo accent carries over; glows and tints are halved —
       they read twice as loud on light

   ► To revert the whole theme: remove this file's <link> from the
     pages (and the head bootstrap snippet). Dark is the default.
   ───────────────────────────────────────────────────────────── */

html[data-theme="light"] {
  color-scheme: light;

  /* surfaces — white cards on a violet-tinted off-white canvas */
  --bg: #f2f2f8;
  --panel: #ffffff;
  --panel-2: #f7f7fb;
  --surface-3: #ededf4;

  /* hairlines — low-alpha violet ink (mirror of white-alpha on dark) */
  --line: rgba(21, 23, 66, 0.10);
  --line-strong: rgba(21, 23, 66, 0.15);
  --edge-hi: rgba(255, 255, 255, 0.85);
  --glow: rgba(21, 23, 66, 0.04);

  /* text — inverted ladder, violet-inked near-black */
  --text: #17182b;
  --muted: #4d5065;
  --muted-2: #686b83;   /* ≥4.5:1 on every surface incl. the canvas */
  --muted-3: #a4a6ba;

  /* Light gets its OWN accent — --accent and --accent-strong were the only
     two tokens light.css did not pivot, so dark and light were locked
     together. On white the brand green has to go DARKER to stay loud
     enough and to clear AA for white-on-accent labels — the opposite of
     what dark needs. Here the tint triplet is DARKER than the fill (dark
     inverts that), because a light green wash on white is invisible. */
  --accent: #13743d;
  --accent-strong: #0e5c30;
  --accent-bright: #116836;
  --accent-text: #106036;   /* 7.8:1 on white */
  --accent-dim: rgba(19, 116, 61, 0.55);
  --accent-faint: rgba(var(--accent-rgb), 0.10);
  --accent-glow: rgba(19, 116, 61, 0.20);
  --accent-rgb: 19, 116, 61;
  --accent-soft: rgba(var(--accent-rgb), 0.16);

  /* semantics — dark-mode values fail contrast on white; deepen */
  --danger: #cf3a3a;
  --gold: #8f6b1f;
  --gauge-warm: #a8842e;
  --positive: #23789a;
  --positive-faint: rgba(10, 127, 174, 0.10);
  --gauge-track: #e4e4ee;
  /* Chart series, light. Same roles as dark, deepened — a muted pastel
     that reads well on near-black vanishes on white. */
  --chart-1: #2f7d5f;
  --chart-2: #3f5f8f;
  --chart-3: #8d7433;
  --chart-4: #5a6b7f;
  --chart-pos: #157a4d;

  /* the wash pivot: every rgba(var(--wash-rgb), a) overlay in the app
     becomes cool violet ink instead of white */
  --wash-rgb: 21, 23, 66;

  /* text lift — the near-white literal ladder inverts to deep inks */
  --text-hi: #101120;
  --text-1: #1b1c2e;
  --text-2: #33354a;
  --text-3: #3d3f55;
  --text-4: #4d5065;
  --text-5: #14152a;

  /* control-surface lift — ladder direction inverts: "lighter than
     panel" in dark means "darker than panel" in light */
  --ctl-1: #eaeaf2;
  --ctl-2: #e7e7f0;
  --ctl-3: #e2e2ec;
  --ctl-4: #dedee9;
  --ctl-5: #d8d8e4;
  --ctl-6: #d4d4e1;
  --ctl-7: #caccdb;

  /* dark-glass material becomes light glass */
  --glass-hi-rgb: 252, 252, 254;
  --glass-lo-rgb: 244, 244, 249;
  --ctl-8: #e0e0ea;
  /* semantic ink families — deep, AA-safe inks */
  --cyan-1: #0a7fae;
  --cyan-2: #095e81;
  --cyan-3: #0a6a90;
  --cyan-4: #0a6a90;
  --cyan-5: #063e56;
  --cyan-bg: #e8f4fa;
  --gold-2: #8a661d;
  --gold-3: #7c5c17;
  --gold-4: #6f5312;
  --gold-5: #816018;
  --red-1: #942626;
  --red-2: #c23a34;
  --red-3: #8f2222;
  --red-4: #ad2f2f;
  --red-5: #8a2020;
  --red-6: #ad2f2f;
  --red-7: #a52a2a;
  --mint-1: #0b5a37;
  --mint-2: #116b43;
  --mint-bg1: #e9f8ef;
  --mint-bg2: #ddf3e6;
  --ind-1: #4338ca;
  --ind-2: #3730a3;
  --blue-1: #2563eb;
  --grey-1: #82849a;
  --grey-2: #a6a8bc;
  --grey-3: #82849a;
  --text-6: #1e1f33;
  --text-7: #3a3d52;
  --text-8: #26283c;
  --text-9: #31334a;
  --text-0: #14152a;
  --grey-4: #9092a8;
  --grey-rgb: 70, 72, 100;
  /* long-tail pale text → hue-preserving deep inks */
  --lt1: #304258;
  --lt10: #7a4e00;
  --lt11: #003a80;
  --lt12: #002f7a;
  --lt13: #203c5f;
  --lt14: #146631;
  --lt15: #8c5500;
  --lt16: #005d7f;
  --lt17: #38384d;
  --lt18: #00587a;
  --lt19: #00557a;
  --lt2: #363645;
  --lt20: #39394e;
  --lt21: #3b3b53;
  --lt22: #3a3a5c;
  --lt23: #224b7c;
  --lt24: #00608d;
  --lt25: #545475;
  --lt26: #130287;
  --lt27: #2b425a;
  --lt28: #393951;
  --lt29: #2d2d4e;
  --lt3: #840064;
  --lt30: #393954;
  --lt31: #383c54;
  --lt32: #842222;
  --lt33: #8b0000;
  --lt34: #15186e;
  --lt35: #36364b;
  --lt36: #414159;
  --lt37: #313149;
  --lt38: #423838;
  --lt39: #3d3d5c;
  --lt4: #4b4b70;
  --lt40: #434362;
  --lt41: #1a007f;
  --lt42: #415474;
  --lt43: #000a7a;
  --lt44: #14662a;
  --lt45: #32324a;
  --lt46: #363651;
  --lt47: #16007c;
  --lt48: #860000;
  --lt49: #005c7a;
  --lt5: #423838;
  --lt50: #383854;
  --lt51: #000c7a;
  --lt52: #000b7a;
  --lt53: #864b00;
  --lt6: #4c4c6d;
  --lt7: #505071;
  --lt8: #42586f;
  --lt9: #8e0900;
  /* wells recess with faint ink instead of heavy black */
  --well-rgb: 21, 23, 66;
  --scrim-rgb: 12, 13, 38;  /* backdrops keep a real veil on light */
  --well-a12: 0.04;
  --well-a18: 0.045;
  --well-a20: 0.05;
  --well-a22: 0.055;
  --well-a24: 0.06;
  --well-a25: 0.062;
  --well-a28: 0.07;
  --well-a30: 0.075;
  --well-a36: 0.09;
  --well-a5: 0.125;
  --well-a55: 0.138;
  --well-a6: 0.15;
  /* residual dark-glass triplets become near-white glass */
  --dk1-rgb: 244, 244, 243;
  --dk10-rgb: 243, 243, 242;
  --dk11-rgb: 247, 247, 245;
  --dk12-rgb: 248, 248, 247;
  --dk13-rgb: 241, 241, 239;
  --dk14-rgb: 249, 249, 248;
  --dk15-rgb: 244, 244, 242;
  --dk16-rgb: 247, 247, 245;
  --dk17-rgb: 251, 251, 249;
  --dk18-rgb: 240, 240, 238;
  --dk19-rgb: 246, 245, 241;
  --dk2-rgb: 245, 245, 243;
  --dk20-rgb: 249, 248, 245;
  --dk21-rgb: 245, 243, 240;
  --dk22-rgb: 250, 250, 249;
  --dk3-rgb: 251, 251, 250;
  --dk4-rgb: 240, 240, 239;
  --dk5-rgb: 245, 245, 243;
  --dk6-rgb: 249, 249, 249;
  --dk7-rgb: 245, 245, 244;
  --dk8-rgb: 237, 237, 235;
  --dk9-rgb: 237, 235, 232;

  /* elevation — Stripe-crisp: the hairline border carries the card,
     the shadow is just a whisper of lift underneath */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(21, 23, 66, 0.04),
    0 3px 12px -6px rgba(35, 38, 110, 0.07);
}

/* Canvas ambience — the indigo/cyan hero glows soften on light. */
html[data-theme="light"] body {
  background-image:
    radial-gradient(900px 480px at 62% -8%, rgba(var(--accent-rgb), 0.09), transparent 60%),
    radial-gradient(700px 700px at 100% 0%, rgba(10, 127, 174, 0.04), transparent 55%);
}

/* ─────────────────────────────────────────────────────────────
   Patch section — targeted light-mode fixes for rules whose dark
   values can't be expressed through the tokens above. Keep each
   patch commented with the dark rule it counters.
   ───────────────────────────────────────────────────────────── */

/* Sidebar — main.css paints it as a violet near-black fading into the
   canvas (#0c0c13 → --bg). Light keeps the same idea inverted: a hair
   brighter than the canvas at the rail edge, with the soft bottom shade
   carried by the wash layer. */
html[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.012) 0%, rgba(var(--wash-rgb), 0) 60%, rgba(21, 23, 66, 0.03) 100%),
    linear-gradient(to right, #fbfbfe, var(--bg));
  border-right: 1px solid rgba(21, 23, 66, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(35, 38, 110, 0.04);
}

/* Workspace switcher card — dark rule hardcodes color:#f5f5f5. */
html[data-theme="light"] .ws-card { color: var(--text); }

/* Native controls that force their own dark popup rendering
   (admin.css .ax-month, skills.css .sk-model select). */
html[data-theme="light"] .ax-month,
html[data-theme="light"] .sk-model select {
  color-scheme: light;
}

/* Agents refined layer — css/agents-refined.css runs on local --rf-*
   tokens with dark literals baked in; re-point them for light. */
html[data-theme="light"] body[data-page="agents"] {
  --rf-card-bg: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  --rf-line: rgba(21, 23, 66, 0.09);
  --rf-elev:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(21, 23, 66, 0.04),
    0 3px 12px -6px rgba(35, 38, 110, 0.07);
  --rf-elev-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(21, 23, 66, 0.05),
    0 5px 16px -6px rgba(35, 38, 110, 0.10);
  --rf-title: #14152a;
  --rf-body:  #565870;
  --rf-sub:   #6b6d85;
}
html[data-theme="light"] body[data-page="agents"] .card-head .card-sub { color: #565870; }
html[data-theme="light"] body[data-page="agents"] .section-count { color: #82849a; }
html[data-theme="light"] body[data-page="agents"] .agents-tab.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08));
  border-color: rgba(var(--accent-rgb), 0.34);
  color: #3b3ec9;
}
/* Sidebar running-agent count — accent ink needs the darker light-mode
   green to clear contrast on the pale pill. */
html[data-theme="light"] .nav-agent-count {
  background: rgba(21, 132, 68, 0.12);
  color: #106036;
}

/* Ask-AI "Find answer" CTA — the dark theme's pale-mint-on-indigo tint
   inverts to green-on-lavender, which clashes; keep the tint family
   indigo on light. */
html[data-theme="light"] .aip-find-btn {
  color: var(--accent-bright);
}

/* ── Elevation discipline ─────────────────────────────────────
   Exactly three levels on light, Stripe-style:
     1. surface cards   → the --shadow-card whisper (set above)
     2. popovers/menus  → one soft violet drop
     3. everything else → FLAT. Controls, nested tiles, and stat
        cards live INSIDE a surface — they get a hairline border and
        background, never their own shadow. Glows don't exist on light.
   The dark theme keeps all of its hand-rolled shadows untouched. */

/* Controls: buttons never cast. A 1px contact line is the maximum. */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn:active,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary:hover {
  box-shadow: 0 1px 1px rgba(21, 23, 66, 0.05);
}
html[data-theme="light"] .btn.btn-ghost,
html[data-theme="light"] .btn.btn-ghost:hover { box-shadow: none; }

/* Nested tiles and stat cards: flat, the border does the work. */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .vital,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .bc-segment-pill,
html[data-theme="light"] .toggle-pill,
html[data-theme="light"] .toggle-pill button.active,
html[data-theme="light"] .sidebar-toggle,
html[data-theme="light"] .worth-cta {
  box-shadow: none;
}
/* Featured plan keeps its indigo ring — just not the plume. */
html[data-theme="light"] .plan-card.is-featured {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.22);
}

/* Glows read as smudges on white — none. */
html[data-theme="light"] .sev,
html[data-theme="light"] .subnav-dot,
html[data-theme="light"] .plan-badge,
html[data-theme="light"] .tm-fill {
  box-shadow: none;
}

/* Dropdown menus are popovers: one soft drop, same as the account menu. */
html[data-theme="light"] .dropdown .menu {
  box-shadow:
    0 12px 28px -12px rgba(35, 38, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Page-specific stragglers caught by the shadow audit. */
html[data-theme="light"] .mk-h-live,          /* marketplace "LIVE DATA" gold text glow */
html[data-theme="light"] .mk-toggle-dot,
html[data-theme="light"] .mk-target-dot,
html[data-theme="light"] .range-pill button.active,
html[data-theme="light"] .ig-generate {
  box-shadow: none;
}
html[data-theme="light"] .ig-composer {       /* image-gen composer is a surface card */
  box-shadow: var(--shadow-card);
}

/* Composer chips — the dark theme runs them deliberately faint
   (0.22 bg / 0.42 text); on light that reads as disabled. Quiet ink. */
html[data-theme="light"] .chips .chip {
  background: rgba(21, 23, 66, 0.045);
  border-color: rgba(21, 23, 66, 0.10);
  color: rgba(45, 47, 75, 0.78);
}
html[data-theme="light"] .chips .chip .chip-label { color: var(--muted); }
html[data-theme="light"] .chips .chip:hover,
html[data-theme="light"] .chips .chip.open {
  background: rgba(21, 23, 66, 0.07);
  border-color: rgba(21, 23, 66, 0.16);
  color: var(--text);
}
html[data-theme="light"] .chips .chip:hover .chip-label,
html[data-theme="light"] .chips .chip.open .chip-label { color: var(--text); }

/* Chat suggestion CTA — dark's bright #22c55e with pale-cyan text
   glares on light; keep the green identity but deep, with white text. */
html[data-theme="light"] .sug-content {
  color: #ffffff;
  background: var(--mint-2);
  border-color: var(--mint-2);
}
html[data-theme="light"] .sug-content:hover {
  background: #0d5a38;
  border-color: #0d5a38;
}
html[data-theme="light"] .sug-content.is-busy {
  color: var(--mint-2);
  background: var(--mint-bg1);
  border-color: rgba(17, 107, 67, 0.35);
}

/* Domains + Projects cards (settings.css) — hand-rolled black plumes
   and glass gradients flatten to the standard light card material. */
html[data-theme="light"] .dom-card,
html[data-theme="light"] .proj-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .dom-card:hover,
html[data-theme="light"] .proj-card:hover { border-color: var(--line-strong); }
html[data-theme="light"] .dom-fav,
html[data-theme="light"] .proj-logo,
html[data-theme="light"] .conn-logo {
  box-shadow: none;
  border-color: rgba(21, 23, 66, 0.10);
}
html[data-theme="light"] .mobile-nav-toggle {
  box-shadow: 0 2px 8px -2px rgba(35, 38, 110, 0.18);
}
/* Project chip — dark rule hardcodes near-white rgba(232,232,234,.85). */
html[data-theme="light"] .dom-proj-chip {
  color: var(--muted);
  background: rgba(21, 23, 66, 0.05);
}
/* ACTIVE badge — deep-teal-on-indigo clashes; keep the indigo family. */
html[data-theme="light"] .dom-status.active {
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.30);
}

/* Chat composer scrim — chat-thread.css fades the thread out into a
   near-black band behind the docked composer; on light it fades into
   the canvas instead. Blur carries over. */
html[data-theme="light"] .chat-active .composer {
  background: linear-gradient(
    180deg,
    rgba(242, 242, 248, 0) 0%,
    rgba(242, 242, 248, 0.92) 55%
  );
}

/* Workspace switcher popover ("select domain in focus") — main.css
   builds it from raw dark greys (#141414 shell, #1a1a1a wells, #666/#999
   text, #ddd names). Light shell + ink ladder; the per-domain avatar
   tiles keep their own colors. */
html[data-theme="light"] .ws-pop {
  background: #ffffff;
  border: 0.5px solid rgba(21, 23, 66, 0.12);
  box-shadow:
    0 12px 32px rgba(35, 38, 110, 0.22),
    0 0 0 1px rgba(21, 23, 66, 0.02);
}
html[data-theme="light"] .ws-pop-search { background: var(--surface-3); }
html[data-theme="light"] .ws-pop-search input::placeholder { color: var(--muted-3); }
html[data-theme="light"] .ws-pop-search-kbd {
  color: var(--muted-2);
  border-color: rgba(21, 23, 66, 0.15);
}
html[data-theme="light"] .ws-pop-section-head { color: var(--muted-2); }
html[data-theme="light"] .ws-pop-section-head:hover { color: var(--muted); }
html[data-theme="light"] .ws-pop-domain.is-active { background: rgba(21, 23, 66, 0.05); }
html[data-theme="light"] .ws-pop-domain-name { color: var(--text); }
html[data-theme="light"] .ws-pop-domain-check { color: var(--positive); }
html[data-theme="light"] .ws-pop-action { color: var(--muted); }
html[data-theme="light"] .ws-pop-action:hover,
html[data-theme="light"] .ws-pop-action.is-highlighted { color: var(--text); }
html[data-theme="light"] .ws-pop-empty { color: var(--muted-2); }
html[data-theme="light"] .ws-pop-skeleton {
  background: linear-gradient(90deg, #efeff5, var(--ctl-8), #efeff5);
  background-size: 200% 100%;
}

/* Account hover menu — dark glass (main.css .account-menu gradient)
   becomes light glass: near-white translucency, ink hairline, softer
   drop. The backdrop blur carries over. */
html[data-theme="light"] .account-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 249, 253, 0.92));
  border: 1px solid rgba(21, 23, 66, 0.10);
  box-shadow:
    0 12px 28px -12px rgba(35, 38, 110, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}