/*
 * Site theme. Source of truth: /DESIGN.md. Every value here maps to a DESIGN.md token.
 */

/* Base CSS declares semantic colors on [data-seed-color-mode], so the remap needs a more specific selector. */
:root, :root[data-seed-color-mode] {
  /* Brand remap (DESIGN.md › Colors › Theme mapping) */
  --seed-color-bg-brand-solid: var(--seed-color-palette-gray-1000);
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-gray-900);
  --seed-color-bg-brand-weak: var(--seed-color-palette-blue-100);
  --seed-color-bg-brand-weak-pressed: var(--seed-color-palette-blue-200);
  --seed-color-fg-brand: var(--seed-color-palette-blue-800);
  --seed-color-fg-brand-contrast: var(--seed-color-palette-blue-900);
  --seed-color-stroke-brand-solid: var(--seed-color-palette-blue-700);
  --seed-color-stroke-brand-weak: var(--seed-color-palette-blue-300);
  --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-700);
  --seed-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* DESIGN.md colors */
  --mc-bg: var(--seed-color-palette-gray-00);
  --mc-surface: var(--seed-color-palette-gray-100);
  --mc-surface-pressed: var(--seed-color-palette-gray-200);
  --mc-text: var(--seed-color-palette-gray-1000);
  --mc-text-muted: var(--seed-color-palette-gray-800);
  --mc-text-subtle: var(--seed-color-palette-gray-700);
  --mc-text-inverted: #ffffff;
  --mc-border: var(--seed-color-palette-gray-400);
  --mc-border-strong: var(--seed-color-palette-gray-800);
  --mc-primary: var(--seed-color-palette-gray-1000);
  --mc-ink-pressed: var(--seed-color-palette-gray-900);
  --mc-accent: var(--seed-color-palette-blue-800);
  --mc-accent-strong: var(--seed-color-palette-blue-900);
  --mc-accent-weak: var(--seed-color-palette-blue-100);
  --mc-accent-line: var(--seed-color-palette-blue-700);
  --mc-critical: var(--seed-color-palette-red-800);
  --mc-positive: var(--seed-color-palette-green-800);

  /* DESIGN.md spacing / radius */
  --mc-x1: 4px; --mc-x2: 8px; --mc-x3: 12px; --mc-x4: 16px; --mc-x5: 20px;
  --mc-x6: 24px; --mc-x8: 32px; --mc-x10: 40px; --mc-x12: 48px; --mc-x16: 64px;
  --mc-r-sm: 8px; --mc-r-md: 12px; --mc-r-lg: 16px; --mc-r-full: 9999px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--seed-font-family);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mc-accent); text-underline-offset: 2px; }
a:hover { color: var(--mc-accent-strong); }
:focus-visible { outline: 2px solid var(--mc-accent-line); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography (DESIGN.md typography) ---------- */
.t-display { font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.t-h1 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0; }
.t-h2 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 var(--mc-x3); }
.t-h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 var(--mc-x2); }
.t-label { font-size: 14px; line-height: 19px; font-weight: 500; }
.t-caption { font-size: 13px; line-height: 18px; }
.t-num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.muted { color: var(--mc-text-muted); }
@media (min-width: 768px) { .t-h1 { font-size: 32px; line-height: 42px; } }

/* ---------- Layout ---------- */
.mc-container { max-width: 960px; margin: 0 auto; padding: 0 var(--mc-x4); }
.mc-nav { height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--mc-border); }
.mc-logo { font-weight: 700; font-size: 16px; color: var(--mc-text); text-decoration: none; letter-spacing: -0.01em; }
.mc-logo span { color: var(--mc-accent); }

/* ---------- Card ---------- */
.mc-card { background: var(--mc-surface); border-radius: var(--mc-r-md); padding: var(--mc-x5); }
.mc-card + .mc-card { margin-top: var(--mc-x5); }

/* ---------- Field + text input (tokens from DESIGN.md) ---------- */
.mc-field + .mc-field { margin-top: var(--mc-x4); }
.mc-field-label { display: block; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--mc-text-muted); margin-bottom: var(--mc-x2); }
.mc-field-help { margin-top: var(--mc-x1); font-size: 13px; line-height: 18px; color: var(--mc-text-muted); }
.mc-field-error { margin-top: var(--mc-x1); font-size: 13px; line-height: 18px; color: var(--mc-critical); }
.mc-field-error:empty { display: none; }
.seed-text-input__root.mc-input {
  height: 48px;
  padding: 0 var(--mc-x3);
  background: var(--mc-bg);
  border-radius: var(--mc-r-sm);
  box-shadow: inset 0 0 0 1px var(--mc-border);
  gap: var(--mc-x2);
}
.seed-text-input__root.mc-input:focus-within { box-shadow: inset 0 0 0 2px var(--mc-accent-line); }
.seed-text-input__root.mc-input[data-invalid] { box-shadow: inset 0 0 0 2px var(--mc-critical); }
.mc-input .seed-text-input__value { font-size: 16px; font-weight: 500; font-feature-settings: "tnum" 1; color: var(--mc-text); }
.mc-input .seed-text-input__suffixText { color: var(--mc-text-muted); font-size: 14px; }
.mc-input-row + .mc-field { margin-top: var(--mc-x4); }
.mc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-x3); }

/* Native select styled as a field (model picker) */
.mc-select {
  width: 100%; height: 48px; padding: 0 var(--mc-x10) 0 var(--mc-x3);
  font: inherit; font-size: 16px; color: var(--mc-text);
  background: var(--mc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23555d6d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: none; border-radius: var(--mc-r-sm); box-shadow: inset 0 0 0 1px var(--mc-border);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.mc-select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mc-accent-line); }

/* ---------- Segmented control (restyled per DESIGN.md segmented-option) ---------- */
.seed-segmented-control__root.mc-seg {
  width: 100%;
  padding: var(--mc-x1);
  border-radius: var(--mc-r-sm);
  background: var(--mc-bg);
  box-shadow: inset 0 0 0 1px var(--mc-border);
}
.mc-seg .seed-segmented-control__indicator {
  border-radius: 6px;
  background: var(--mc-accent-weak);
  box-shadow: inset 0 0 0 1px var(--seed-color-palette-blue-300);
}
.mc-seg .seed-segmented-control__item {
  min-width: 0; min-height: 36px; padding-inline: var(--mc-x2);
  border-radius: 6px;
  font-size: 14px; line-height: 19px; font-weight: 500;
  color: var(--mc-text-muted);
}
.mc-seg .seed-segmented-control__item[data-checked] { color: var(--mc-accent); font-weight: 700; }
.mc-seg .seed-segmented-control__item:has(input:focus-visible) { outline: 2px solid var(--mc-accent-line); outline-offset: 1px; }
.mc-seg .seed-segmented-control__item input { position: absolute; opacity: 0; pointer-events: none; }
.mc-seg .seed-segmented-control__item:not([data-checked]):hover { background: var(--mc-surface); box-shadow: none; }

/* ---------- Buttons ---------- */
.mc-btn-primary.seed-action-button {
  width: 100%; height: 52px; padding: 0 var(--mc-x5);
  border-radius: var(--mc-r-sm);
  font-size: 16px; font-weight: 700;
}
/* Colors come from the neutralOutline variant as-is; only size and radius follow DESIGN.md. */
.mc-btn-secondary.seed-action-button {
  height: 44px; padding: 0 var(--mc-x4);
  border-radius: var(--mc-r-sm);
  font-size: 14px;
}
.seed-action-button:focus-visible { outline: 2px solid var(--mc-accent-line); outline-offset: 2px; }

/* ---------- Result box ---------- */
.mc-result { background: var(--mc-accent-weak); color: var(--mc-accent); border-radius: var(--mc-r-lg); padding: var(--mc-x6); }
.mc-result-label { font-size: 14px; line-height: 19px; font-weight: 500; color: var(--mc-text-muted); }
.mc-result-value { margin: var(--mc-x1) 0 var(--mc-x2); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.mc-result-value small { font-size: 22px; font-weight: 500; }
@media (min-width: 768px) { .mc-result-value { font-size: 48px; line-height: 60px; } }
.mc-status { font-size: 14px; line-height: 19px; font-weight: 500; }
.mc-status[data-tone="positive"] { color: var(--mc-positive); }
.mc-status[data-tone="critical"] { color: var(--mc-critical); }

/* ---------- Callout (neutral tone) ---------- */
.mc-callout { margin-top: var(--mc-x4); padding: var(--mc-x3) var(--mc-x4); border-radius: var(--mc-r-sm); background: var(--mc-bg); box-shadow: inset 0 0 0 1px var(--mc-border); font-size: 13px; line-height: 18px; color: var(--mc-text-muted); }
.mc-callout strong { color: var(--mc-text); font-weight: 500; }
.mc-tier { font-weight: 700; color: var(--mc-text); }
.mc-callout[data-tier="verified"] .mc-tier { color: var(--mc-positive); }

/* ---------- Snackbar ---------- */
.mc-snackbar {
  position: fixed; left: 50%; bottom: var(--mc-x6); transform: translate(-50%, 16px);
  background: var(--mc-primary); color: var(--mc-text-inverted);
  padding: var(--mc-x3) var(--mc-x4); border-radius: var(--mc-r-sm);
  font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.mc-snackbar[data-open] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ---------- */
.mc-footer { margin-top: var(--mc-x16); padding: var(--mc-x8) 0; border-top: 1px solid var(--mc-border); font-size: 13px; line-height: 18px; color: var(--mc-text-muted); }
.mc-footer a { color: var(--mc-text-muted); }