/* Shared semantic colors keep content and the sample interface in sync. */
@layer base {
  :root {
    color-scheme: light;
    --surface-raised: #f9f9f5;
    --surface-soft: #efefea;
    --surface-chrome: #eaeae4;
    --surface-hover: #e5e5dc;
    --surface-selected: #dedfd4;
    --surface-warm: #f3e7d9;
    --badge-warm-bg: #ebd1b9;
    --badge-green-bg: #e8eadd;
    --border-soft: #d3d7c9;
    --border-strong: #8d8e80;
    --border-warm: #d7bfa3;
    --ink-secondary: #55594f;
    --ink-green: #56633e;
    --ink-warm: #94451d;
    --ink-strong: #292c24;
    --focus: #a83b12;
    --button-bg: #b94117;
    --button-hover: #96330e;
    --button-ink: #fffefa;
    --file-yellow-bg: #efe7d2;
    --file-yellow-ink: #99621a;
    --file-red-bg: #eee2dd;
    --file-red-ink: #a3503a;
    --file-green-bg: #e2e8da;
    --file-green-ink: #596b3f;
    --file-blue-bg: #dee7e7;
    --file-blue-ink: #466767;
  }
  @media screen {
    :root[data-theme="dark"] {
      color-scheme: dark;
      --paper: #191c1a;
      --ink: #eceee6;
      --muted: #b2b9ae;
      --line: #3d463e;
      --orange: #ffa16a;
      --orange-bright: #ffae76;
      --white: #232823;
      --surface-raised: #222824;
      --surface-soft: #252d26;
      --surface-chrome: #30382f;
      --surface-hover: #364133;
      --surface-selected: #3e4a38;
      --surface-warm: #352b23;
      --badge-warm-bg: #4b3525;
      --badge-green-bg: #35432f;
      --border-soft: #424b3f;
      --border-strong: #68745f;
      --border-warm: #785238;
      --ink-secondary: #bbc3b2;
      --ink-green: #c0d5a3;
      --ink-warm: #ffb381;
      --ink-strong: #f0f1e9;
      --focus: #ffbb87;
      --button-bg: #f39a61;
      --button-hover: #ffb381;
      --button-ink: #211b15;
      --file-yellow-bg: #413721;
      --file-yellow-ink: #e9c57c;
      --file-red-bg: #452c29;
      --file-red-ink: #efaa96;
      --file-green-bg: #303d29;
      --file-green-ink: #c1d797;
      --file-blue-bg: #273d3c;
      --file-blue-ink: #a4d1cc;
    }
  }
  @media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #191c1a;
      --ink: #eceee6;
      --muted: #b2b9ae;
      --line: #3d463e;
      --orange: #ffa16a;
      --orange-bright: #ffae76;
      --white: #232823;
      --surface-raised: #222824;
      --surface-soft: #252d26;
      --surface-chrome: #30382f;
      --surface-hover: #364133;
      --surface-selected: #3e4a38;
      --surface-warm: #352b23;
      --badge-warm-bg: #4b3525;
      --badge-green-bg: #35432f;
      --border-soft: #424b3f;
      --border-strong: #68745f;
      --border-warm: #785238;
      --ink-secondary: #bbc3b2;
      --ink-green: #c0d5a3;
      --ink-warm: #ffb381;
      --ink-strong: #f0f1e9;
      --focus: #ffbb87;
      --button-bg: #f39a61;
      --button-hover: #ffb381;
      --button-ink: #211b15;
      --file-yellow-bg: #413721;
      --file-yellow-ink: #e9c57c;
      --file-red-bg: #452c29;
      --file-red-ink: #efaa96;
      --file-green-bg: #303d29;
      --file-green-ink: #c1d797;
      --file-blue-bg: #273d3c;
      --file-blue-ink: #a4d1cc;
    }
  }
}
@layer components {
  .header-actions { display: flex; align-items: center; gap: 14px; }
  .appearance-control { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding-left: 9px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--ink); background: var(--paper); }
  .appearance-control .icon { width: 17px; height: 17px; }
  .appearance-control select { font: inherit; font-size: 12px; font-weight: 550; min-height: 44px; min-width: 75px; border: 0; padding: 7px 5px; cursor: pointer; color: inherit; background: transparent; border-radius: 5px; }
  .appearance-control option { background: var(--paper); color: var(--ink); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .channel-note { max-width: 900px; margin: 24px auto 0; border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }
  .channel-note strong { color: var(--ink); }
  .support-channels { margin-top: 30px; }
  .support-channels h2 { font-size: 26px; }
  .support-channels > p { color: var(--muted); max-width: 760px; margin-top: 12px; }
  .channel-actions { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 16px; }
  .policy-kicker { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
}
@layer responsive {
  @media (max-width: 800px) {
    .site-header { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding-top: 15px; padding-bottom: 5px; }
    .site-header > nav { margin-left: 0; grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 34px; }
    .site-header > nav a:first-child { display: inline-flex; }
    .header-cta { display: none; }
    .header-actions { grid-column: 2; grid-row: 1; }
    .appearance-control { padding-left: 7px; gap: 3px; }
    .appearance-control select { min-width: 68px; }
    .channel-note { font-size: 12px; }
  }
  @media print { .header-actions { display: none; } }
}