/* ─────────────────────────────────────────────────────────────
   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;

  /* accent — indigo transfers; "bright" darkens (darker = louder on
     light), glows and tints halve */
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-bright: #4b4ee0;
  --accent-dim: rgba(79, 70, 229, 0.55);
  --accent-faint: rgba(99, 102, 241, 0.10);
  --accent-glow: rgba(79, 70, 229, 0.22);

  /* semantics — dark-mode values fail contrast on white; deepen */
  --danger: #cf3a3a;
  --gold: #8f6b1f;
  --gauge-warm: #a8842e;
  --positive: #0a7fae;
  --positive-faint: rgba(10, 127, 174, 0.10);
  --gauge-track: #e4e4ee;

  /* 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(99, 102, 241, 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(99, 102, 241, 0.16), rgba(99, 102, 241, 0.08));
  border-color: rgba(99, 102, 241, 0.34);
  color: #3b3ec9;
}

/* 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(99, 102, 241, 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(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 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);
}