/* Code design master: one scoped token source for the homepage and component reference.
   Initialized from the corrected Proposed v1.0 specification and active CSV. */
:where(.scope) {
  --paper-50: #fcfbf7;
  --paper-100: #f8f6ef;
  --paper-200: #f4f1e8;
  --paper-300: #e8e4d9;
  --paper-400: #d5d0c3;
  --paper-500: #b9b3a2;
  --ink-200: #c4cec7;
  --ink-300: #a7b0aa;
  --ink-400: #70857a;
  --ink-500: #586761;
  --ink-700: #33423b;
  --ink-800: #23312c;
  --ink-900: #17231f;
  --ink-950: #111916;
  --celadon-50: #f1f7f4;
  --celadon-100: #dceae3;
  --celadon-300: #8fc4b1;
  --celadon-500: #477c70;
  --celadon-600: #35685d;
  --celadon-800: #244b43;
  --vermilion-600: #963e29;
  --vermilion-700: #7e3421;
  --vermilion-800: #632819;
  --gold-100: #f2e7c9;
  --gold-500: #a9782f;
  --gold-700: #604214;
  --pine-500: #2a6b44;
  --color-bg-canvas: var(--paper-200);
  --color-bg-surface: var(--paper-50);
  --color-bg-subtle: var(--paper-300);
  --color-bg-hover: var(--paper-100);
  --color-bg-inverse: var(--ink-900);
  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: var(--paper-50);
  --color-text-inverse-muted: var(--ink-200);
  --color-border-subtle: var(--paper-400);
  --color-border-default: var(--paper-500);
  --color-border-field: var(--ink-400);
  --color-border-strong: var(--ink-500);
  --color-border-inverse: var(--ink-700);
  --color-focus: var(--ink-900);
  --color-ai-bg: var(--celadon-100);
  --color-ai-fg: var(--celadon-800);
  --color-ai-line: var(--celadon-500);
  --color-ai-inverse: var(--celadon-300);
  --color-selected-bg: var(--celadon-50);
  --color-selected-line: var(--celadon-600);
  --color-action-default: var(--vermilion-600);
  --color-action-hover: var(--vermilion-700);
  --color-action-pressed: var(--vermilion-800);
  --color-pending-bg: var(--gold-100);
  --color-pending-fg: var(--gold-700);
  --color-pending-line: var(--gold-500);
  --color-ready-bg: var(--pine-500);
  --color-ready-fg: var(--paper-50);
  --color-disabled-bg: var(--paper-300);
  --color-disabled-fg: var(--ink-400);
  --color-disabled-border: var(--paper-400);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --type-display: clamp(36px, 4.2vw, 60px);
  --type-h1: 44px;
  --type-h2: 34px;
  --type-h3: 26px;
  --type-h4: 20px;
  --type-h5: 17px;
  --type-body-lg: 19px;
  --type-body: 16px;
  --type-small: 14px;
  --type-caption: 12px;
  --page-gutter: var(--space-12);
  --grid-hero: 5fr 7fr;
  --grid-split: 1fr 1fr;
  --motion-micro: 120ms;
  --easing: cubic-bezier(.2, 0, 0, 1);
  --elevation-panel: 0 12px 32px rgb(23 35 31 / 10%);
  --elevation-pressed: inset 0 1px 2px rgb(17 25 22 / 18%);
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-sans), "IBM Plex Sans", sans-serif;
  font-size: var(--type-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

:where(.scope) *, :where(.scope) *::before, :where(.scope) *::after { box-sizing: border-box; }
:where(.scope) h1, :where(.scope) h2, :where(.scope) h3, :where(.scope) p, :where(.scope) figure, :where(.scope) blockquote, :where(.scope) dl { margin: 0; }
:where(.scope) ul, :where(.scope) ol { margin: 0; padding: 0; list-style: none; }
:where(.scope) button, :where(.scope) a { -webkit-tap-highlight-color: transparent; }
:where(.scope) button { font: inherit; cursor: pointer; }
:where(.scope) a { color: inherit; text-decoration: none; }
:where(.scope) svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.75; }
.scope :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.scope ::selection { background: var(--color-ai-bg); color: var(--color-text-primary); }
:where(.scope) h2 { font-size: var(--type-h2); font-weight: 500; letter-spacing: -.025em; line-height: 1.18; }
:where(.scope) h3 { font-size: var(--type-h4); font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
:where(.scope) section { scroll-margin-top: var(--space-6); }

.scope .button { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--type-small); font-weight: 600; line-height: 1.3; transition: background-color var(--motion-micro) var(--easing), border-color var(--motion-micro) var(--easing); }
.scope .primaryButton { background: var(--color-action-default); color: var(--color-text-inverse); }
.scope .primaryButton:hover:not(:disabled) { background: var(--color-action-hover); }
.scope .primaryButton:active:not(:disabled) { background: var(--color-action-pressed); box-shadow: var(--elevation-pressed); }
.scope .primaryButton:focus-visible { box-shadow: inset 0 0 0 1px var(--color-text-inverse); }
.scope .secondaryButton { border-color: var(--color-border-strong); background: var(--color-bg-surface); }
.scope .secondaryButton:hover:not(:disabled) { background: var(--color-bg-hover); border-color: var(--color-text-primary); }
.scope .secondaryButton:active:not(:disabled) { background: var(--color-bg-subtle); }

.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font-size: var(--type-caption); font-weight: 500; line-height: 1.5; }
.chip svg { width: 14px; height: 14px; }
.aiChip { background: var(--color-ai-bg); color: var(--color-ai-fg); }
.neutralChip { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.pendingChip { background: var(--color-pending-bg); color: var(--color-pending-fg); }

.readyChip { background: var(--color-ready-bg); color: var(--color-ready-fg); }
.scope .button:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-fg); border-color: var(--color-disabled-border); cursor: not-allowed; box-shadow: none; }
.scope .textButton { background: transparent; color: var(--color-text-primary); }
.scope .textButton:hover:not(:disabled) { background: var(--color-bg-hover); }
.scope .textButton:active:not(:disabled) { background: var(--color-bg-subtle); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--page-gutter); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); font-size: var(--type-caption); color: var(--color-text-muted); }
.toolbarLabel { display: inline-flex; align-items: center; gap: var(--space-2); }
.toolbarLabel::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-ai-line); }
.toolbar nav { display: flex; gap: var(--space-4); }
.toolbar a { display: inline-flex; align-items: center; min-height: 32px; }
.toolbar a[aria-current="page"] { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.toolbar a:hover { color: var(--color-action-hover); }

@media (max-width: 1279px) {
  :where(.scope) { --page-gutter: var(--space-10); }
}
@media (max-width: 1023px) {
  :where(.scope) { --page-gutter: var(--space-8); --type-h1: 36px; }
}
@media (max-width: 639px) {
  :where(.scope) { --page-gutter: var(--space-5); --type-display: 36px; --type-h1: 34px; --type-h2: 26px; --type-h3: 22px; --type-h4: 18px; --type-h5: 16px; --type-body-lg: 17px; }
  .toolbar { flex-wrap: wrap; gap: 0 var(--space-3); padding-block: var(--space-2); }
  .toolbar a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scope *, .scope *::before, .scope *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}