/* Light theme. Dark is the default (tokens.css); theme.js sets data-theme on <html>.
   Shared components use tokens, so most of the light theme is this palette.
   Page-specific light rules live at the end of each page's own CSS file. */

/* Warm off-white surfaces; forest green for actions, copper for small details. */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #e8e7df;
  --ink: #202b25;
  --ink-soft: #e0e5d9;
  --paper: #e8e7df;
  --paper-panel: #f1f0e8;
  --paper-text: #202b25;
  --paper-muted: #596457;
  --paper-heading: #202b25;
  --white: #202b25;
  --text-soft: #3d4a3f;
  --muted: #596457;
  --accent-soft: #3c603d;
  --green: #3f6c48;
  --green-hover: #31583a;
  --on-green: #f1f0e8;
  --green-40: rgba(63, 108, 72, .4);
  --line: rgba(32, 43, 37, .18);
  --dark-line: #c1c8b9;
  --line-strong: #75836d;
  --frame-line: #c1c8b9;
  --surface-1: #f1f0e8;
  --surface-2: #dce5d3;
  --band: #dce5d3;
  --band-line: #b8c7ae;
  --hover-fill: #dce5d3;
  --header-bg: rgba(232, 231, 223, .97);
  --backdrop: rgba(24, 32, 25, .74);
  --beak-eye: #e8e7df;
  --shadow-1: 0 1px 2px rgba(54, 66, 44, .12);
  --shadow-2: 0 16px 32px -18px rgba(54, 66, 44, .28);
  --shadow-3: 0 25px 55px -35px rgba(40, 51, 33, .45);
  --theme-hover: #dce5d3;
  --theme-field-line: #7f8d77;
}
:root[data-theme="light"] body { color: var(--paper-heading); }
:root[data-theme="light"] ::selection { background: #b7cfaa; color: #202b25; }

/* Dark display islands keep screenshot and video surrounds familiar in light mode.
   Variables are reset locally, so image pixels and dialog controls stay readable.
   Page agents: add class="island" to any frame that must stay dark in both themes. */
:root[data-theme="light"] :is(.island, .product-stage, .tool-visual, dialog) {
  color-scheme: dark;
  --canvas: #111915;
  --ink: #111915;
  --ink-soft: #18221d;
  --white: #f5f6ef;
  --text-soft: #c4cec3;
  --muted: #b0bda8;
  --accent-soft: #b4cba1;
  --green: #c2ef91;
  --green-hover: #d4f9af;
  --on-green: #111915;
  --green-40: rgba(194, 239, 145, .4);
  --paper-heading: #dde4d8;
  --paper-text: #c4cec3;
  --paper-muted: #b0bda8;
  --line: rgba(225, 237, 223, .18);
  --line-strong: #6a7d61;
  --frame-line: #43583a;
  --surface-1: #1b251e;
  --surface-2: #243123;
  --hover-fill: #24301f;
  --beak-eye: #111915;
  color: #dde4d8;
}
:root[data-theme="light"] :is(.island, .product-stage, .tool-visual, dialog) :focus-visible { outline-color: #c2ef91; }