/* CapSeal - light theme.
 *
 * Loaded after each page's inline <style>, and every page now declares the same
 * canonical palette, so a light theme is a palette swap rather than 28 sets of
 * overrides. Only the variables change; no layout rule is touched.
 *
 * Two deliberate exceptions:
 *
 *   Code blocks keep a dark ground in both themes. That is what developers
 *   expect from a terminal sample, and it means the syntax colours do not have
 *   to be re-tuned for a second background where they would fail contrast.
 *
 *   --seal darkens on light. #27E1A4 on white is 1.6:1, which is unreadable as
 *   text and would fail WCAG by a wide margin. The dark green keeps the brand
 *   relationship and passes.
 */

:root[data-theme="light"] {
  --ink: #FFFFFF;
  --ink-2: #F5F7FA;
  --ink-3: #EAEFF6;
  --line: #DCE3EC;
  --line-soft: rgba(220, 227, 236, 0.7);

  --txt: #0E1420;
  --mute: #5B6779;
  --mute-2: #414D60;

  /* Brand green, darkened for text and borders on a white ground. */
  --seal: #0A7A56;
  --seal-deep: #086044;

  --alert: #C0392B;
  --warn: #8A6D1B;
  --amber: #8A6D1B;

  --nav-bg: rgba(255, 255, 255, 0.88);

  /* Unchanged: the code ground stays dark in both themes. */
  --code-bg: #0A0D13;
  --code-txt: #CDD4E0;
  --code-accent: #7CA9FF;
}

/* The green tints were mixed against a near-black ground. At 6-14% over white
   they all but vanish, so they are lifted to carry the same weight. */
:root[data-theme="light"] .acl,
:root[data-theme="light"] .scen,
:root[data-theme="light"] .key {
  background: rgba(10, 122, 86, 0.07);
}

/* Panels that were lighter than the page in dark are darker than it in light,
   so the elevation reads the same way round. */
:root[data-theme="light"] body { background: var(--ink); color: var(--txt); }

/* The seal badge and hero card were composed for a dark ground. */
:root[data-theme="light"] .frame { box-shadow: 0 20px 50px rgba(14, 20, 32, 0.14); }
:root[data-theme="light"] .seal-badge { background: rgba(255, 255, 255, 0.94); }

/* The workflow diagrams are already light artwork; their white panel would
   disappear against a white page without an edge. */
:root[data-theme="light"] .wf { border-color: var(--line); background: #FFFFFF; }

/* Solid-green blocks put dark ink on green in the dark theme. On light the
   green is dark, so the text on it has to invert. */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .nav-cta,
:root[data-theme="light"] .tier .cta.solid,
:root[data-theme="light"] .cta.solid {
  color: #FFFFFF;
}

/* Code samples keep their dark ground in light mode, so the palette inside them
   has to stay the dark one too. Without this the comment colour follows --mute
   to a dark grey and lands at 3.4:1 on near-black, and every string literal
   follows --seal to a dark green at 3.6:1. Re-declaring the variables on the
   containers scopes the dark palette to exactly the boxes that stayed dark. */
:root[data-theme="light"] pre,
:root[data-theme="light"] .code,
:root[data-theme="light"] .sdk pre {
  --ink: #0B0E14;
  --ink-2: #141926;
  --ink-3: #1B2231;
  --line: #232A3A;
  --txt: #EDEFF4;
  --mute: #7C8598;
  --mute-2: #A8B0C0;
  --seal: #27E1A4;
  --seal-deep: #27E1A4;
  --amber: #FFC24B;
  --warn: #FFC24B;
  --alert: #FF6B5B;
}

/* Solid buttons that hardcode a dark-on-green ink, which inverts once the green
   itself is dark. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] button.primary,
:root[data-theme="light"] .key-btn {
  color: #FFFFFF;
}

/* Inline SVG artwork sets its colours as presentation attributes, which a CSS
   property overrides. The brand green is a display colour at logo size, so it
   is toned rather than darkened all the way to the text green. */
:root[data-theme="light"] .brand svg [stroke="#27E1A4"],
:root[data-theme="light"] nav .brand svg rect,
:root[data-theme="light"] nav .brand svg path,
:root[data-theme="light"] footer .brand svg rect,
:root[data-theme="light"] footer .brand svg path {
  stroke: #12946A;
}

/* ------------------------------------------------------------ the toggle ---
 */
.theme-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--txt);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
}
.theme-btn:hover { border-color: var(--seal); color: var(--seal); }
.theme-btn .sun { display: none; }
.theme-btn .moon { display: block; }
:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }

/* Sits beside the menu button on small screens rather than inside the drawer,
   so it is reachable without opening anything. */
nav .theme-btn { margin-left: auto; }
@media (min-width: 901px) {
  nav .theme-btn { margin-left: 14px; }
}
@media (max-width: 900px) {
  nav .theme-btn { margin-left: auto; margin-right: 10px; }
}