/* AIGOSEA Website Design System V1 — Web-owned, D1 opt-in foundation.
 * Authority: docs/AIGOSEA_DESIGN_SYSTEM_V1.md (Billy-approved D0).
 * Tokens do not alias/override legacy variables. No current page is migrated.
 * .aigosea-ds-* classes are explicit future adapters, not global tag rules.
 * Size defaults choose the restrained end of approved ranges; later reviewed
 * components may override them. No font download, clipping or Home P1 repair.
 */

:root {
  --aigosea-ds-version: "1.0.0";
  --aigosea-ds-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --aigosea-ds-font-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Arial", sans-serif;
  --aigosea-ds-font-family: var(--aigosea-ds-font-en);
  --aigosea-ds-weight-body: 400;
  --aigosea-ds-weight-label: 500;
  --aigosea-ds-weight-heading: 600;
  --aigosea-ds-weight-button: 600;
  --aigosea-ds-weight-metric: 600;
  --aigosea-ds-heading-tracking: -0.01em;
  --aigosea-ds-hero-zh-size: 28px;
  --aigosea-ds-hero-en-size: 30px;
  --aigosea-ds-hero-size: var(--aigosea-ds-hero-en-size);
  --aigosea-ds-page-title-size: 28px;
  --aigosea-ds-editorial-title-size: 26px;
  --aigosea-ds-section-title-size: 24px;
  --aigosea-ds-subsection-title-size: 18px;
  --aigosea-ds-card-title-size: 16px;
  --aigosea-ds-lead-size: 16px;
  --aigosea-ds-body-size: 16px;
  --aigosea-ds-body-compact-size: 14px;
  --aigosea-ds-secondary-size: 13px;
  --aigosea-ds-caption-size: 12px;
  --aigosea-ds-scope-note-size: 13px;
  --aigosea-ds-nav-size: 15px;
  --aigosea-ds-button-size: 14px;
  --aigosea-ds-label-size: 12px;
  --aigosea-ds-metric-size: 22px;
  --aigosea-ds-table-header-size: 12px;
  --aigosea-ds-table-body-size: 14px;
  --aigosea-ds-hero-leading: 1.2;
  --aigosea-ds-page-title-leading: 1.2;
  --aigosea-ds-editorial-title-leading: 1.25;
  --aigosea-ds-section-title-leading: 1.3;
  --aigosea-ds-subsection-title-leading: 1.35;
  --aigosea-ds-card-title-leading: 1.4;
  --aigosea-ds-lead-leading: 1.65;
  --aigosea-ds-body-leading: 1.65;
  --aigosea-ds-compact-leading: 1.55;
  --aigosea-ds-scope-note-leading: 1.6;
  --aigosea-ds-control-leading: 1.4;
  --aigosea-ds-caption-leading: 1.5;
  --aigosea-ds-metric-leading: 1.15;

  --aigosea-ds-brand-mark: #00A87D;
  --aigosea-ds-action-primary: #087A55;
  --aigosea-ds-action-hover: #066847;
  --aigosea-ds-action-soft: #E6F7F2;
  --aigosea-ds-ink: #0D1B2A;
  --aigosea-ds-text-body: #334155;
  --aigosea-ds-text-secondary: #64748B;
  --aigosea-ds-text-disabled: #94A3B8;
  --aigosea-ds-canvas: #F7F9FA;
  --aigosea-ds-surface: #FFFFFF;
  --aigosea-ds-surface-subtle: #F8FAFC;
  --aigosea-ds-surface-dark: #101A2D;
  --aigosea-ds-text-on-dark: #F8FAFC;
  --aigosea-ds-text-secondary-on-dark: #A8B2C0;
  --aigosea-ds-border: #E5E9EE;
  --aigosea-ds-border-strong: #CBD5E1;

  --aigosea-ds-status-success-fg: #137A4B;
  --aigosea-ds-status-success-bg: #ECF8F1;
  --aigosea-ds-status-success-border: #BEE5D0;
  --aigosea-ds-status-info-fg: #2563EB;
  --aigosea-ds-status-info-bg: #EFF6FF;
  --aigosea-ds-status-info-border: #BFDBFE;
  --aigosea-ds-status-warning-fg: #9A6700;
  --aigosea-ds-status-warning-bg: #FFFAEB;
  --aigosea-ds-status-warning-border: #F5D98B;
  --aigosea-ds-status-danger-fg: #B42318;
  --aigosea-ds-status-danger-bg: #FEF3F2;
  --aigosea-ds-status-danger-border: #F4C7C3;
  --aigosea-ds-status-neutral-fg: #526076;
  --aigosea-ds-status-neutral-bg: #F3F4F6;
  --aigosea-ds-status-neutral-border: #E5E7EB;
  --aigosea-ds-status-paused-fg: #6B5A8E;
  --aigosea-ds-status-paused-bg: #F5F3F8;
  --aigosea-ds-status-paused-border: #DDD6E8;

  --aigosea-ds-space-1: 4px;
  --aigosea-ds-space-2: 8px;
  --aigosea-ds-space-3: 12px;
  --aigosea-ds-space-4: 16px;
  --aigosea-ds-space-5: 20px;
  --aigosea-ds-space-6: 24px;
  --aigosea-ds-space-8: 32px;
  --aigosea-ds-space-12: 48px;
  --aigosea-ds-space-16: 64px;
  --aigosea-ds-space-22: 88px;
  --aigosea-ds-radius-state: 4px;
  --aigosea-ds-radius-control: 7px;
  --aigosea-ds-radius-card: 8px;
  --aigosea-ds-radius-panel: 12px;
  --aigosea-ds-radius-feature: 16px;
  --aigosea-ds-radius-pill: 999px;
  --aigosea-ds-shadow-none: none;
  --aigosea-ds-shadow-low: 0 1px 2px rgba(15, 23, 42, 0.04);
  --aigosea-ds-shadow-overlay: 0 8px 24px rgba(13, 27, 42, 0.12);
  --aigosea-ds-container-marketing: 1200px;
  --aigosea-ds-container-reading: 720px;
  --aigosea-ds-gutter: 16px;
  --aigosea-ds-card-padding: var(--aigosea-ds-space-4);
  --aigosea-ds-button-height: 48px;
  --aigosea-ds-focus-width: 2px;
  --aigosea-ds-focus-offset: 2px;
  --aigosea-ds-focus-color: var(--aigosea-ds-action-primary);
  /* Reference constants; CSS media queries below use matching literals. */
  --aigosea-ds-breakpoint-sm: 480px;
  --aigosea-ds-breakpoint-md: 768px;
  --aigosea-ds-breakpoint-lg: 1024px;
  --aigosea-ds-breakpoint-xl: 1200px;
}

/* Language selectors set only namespaced variables, not existing typography. */
html[lang="zh-CN"] {
  --aigosea-ds-font-family: var(--aigosea-ds-font-zh);
  --aigosea-ds-hero-size: var(--aigosea-ds-hero-zh-size);
  --aigosea-ds-heading-tracking: 0;
  --aigosea-ds-hero-leading: 1.25;
  --aigosea-ds-page-title-leading: 1.25;
  --aigosea-ds-editorial-title-leading: 1.3;
  --aigosea-ds-section-title-leading: 1.35;
  --aigosea-ds-subsection-title-leading: 1.4;
  --aigosea-ds-card-title-leading: 1.45;
  --aigosea-ds-lead-leading: 1.75;
  --aigosea-ds-body-leading: 1.75;
  --aigosea-ds-compact-leading: 1.6;
  --aigosea-ds-scope-note-leading: 1.65;
}

html[lang="en"] {
  --aigosea-ds-font-family: var(--aigosea-ds-font-en);
  --aigosea-ds-hero-size: var(--aigosea-ds-hero-en-size);
  --aigosea-ds-heading-tracking: -0.01em;
}

@media (min-width: 768px) {
  :root {
    --aigosea-ds-hero-zh-size: 34px;
    --aigosea-ds-hero-en-size: 36px;
    --aigosea-ds-page-title-size: 34px;
    --aigosea-ds-editorial-title-size: 30px;
    --aigosea-ds-section-title-size: 26px;
    --aigosea-ds-nav-size: 14px;
    --aigosea-ds-gutter: 20px;
    --aigosea-ds-card-padding: var(--aigosea-ds-space-6);
    --aigosea-ds-button-height: 44px;
  }
}

@media (min-width: 1200px) {
  :root {
    --aigosea-ds-hero-zh-size: 40px;
    --aigosea-ds-hero-en-size: 42px;
    --aigosea-ds-page-title-size: 36px;
    --aigosea-ds-editorial-title-size: 34px;
    --aigosea-ds-section-title-size: 28px;
    --aigosea-ds-lead-size: 17px;
    --aigosea-ds-gutter: 24px;
  }
}

/* No page/template uses these classes in D1. Apply explicitly in later scopes. */
:is(.aigosea-ds-type-hero, .aigosea-ds-type-page-title, .aigosea-ds-type-editorial-title, .aigosea-ds-type-section-title, .aigosea-ds-type-subsection-title, .aigosea-ds-type-card-title, .aigosea-ds-type-lead, .aigosea-ds-type-body, .aigosea-ds-type-body-compact, .aigosea-ds-type-secondary, .aigosea-ds-type-caption, .aigosea-ds-type-scope-note, .aigosea-ds-type-nav, .aigosea-ds-type-button, .aigosea-ds-type-label, .aigosea-ds-type-metric, .aigosea-ds-type-table-header, .aigosea-ds-type-table-body) {
  font-family: var(--aigosea-ds-font-family);
  font-weight: var(--aigosea-ds-weight-body);
  letter-spacing: 0;
}

:is(.aigosea-ds-type-hero, .aigosea-ds-type-page-title, .aigosea-ds-type-editorial-title, .aigosea-ds-type-section-title, .aigosea-ds-type-subsection-title, .aigosea-ds-type-card-title) {
  font-weight: var(--aigosea-ds-weight-heading);
  letter-spacing: var(--aigosea-ds-heading-tracking);
  white-space: normal;
  word-break: normal;
}

.aigosea-ds-type-hero { font-size: var(--aigosea-ds-hero-size); line-height: var(--aigosea-ds-hero-leading); }
.aigosea-ds-type-page-title { font-size: var(--aigosea-ds-page-title-size); line-height: var(--aigosea-ds-page-title-leading); }
.aigosea-ds-type-editorial-title { font-size: var(--aigosea-ds-editorial-title-size); line-height: var(--aigosea-ds-editorial-title-leading); }
.aigosea-ds-type-section-title { font-size: var(--aigosea-ds-section-title-size); line-height: var(--aigosea-ds-section-title-leading); }
.aigosea-ds-type-subsection-title { font-size: var(--aigosea-ds-subsection-title-size); line-height: var(--aigosea-ds-subsection-title-leading); }
.aigosea-ds-type-card-title { font-size: var(--aigosea-ds-card-title-size); line-height: var(--aigosea-ds-card-title-leading); }
.aigosea-ds-type-lead { font-size: var(--aigosea-ds-lead-size); line-height: var(--aigosea-ds-lead-leading); }
.aigosea-ds-type-body { font-size: var(--aigosea-ds-body-size); line-height: var(--aigosea-ds-body-leading); }
.aigosea-ds-type-body-compact { font-size: var(--aigosea-ds-body-compact-size); line-height: var(--aigosea-ds-compact-leading); }
.aigosea-ds-type-secondary { font-size: var(--aigosea-ds-secondary-size); line-height: var(--aigosea-ds-compact-leading); }
.aigosea-ds-type-caption { font-size: var(--aigosea-ds-caption-size); line-height: var(--aigosea-ds-caption-leading); }
.aigosea-ds-type-scope-note { font-size: var(--aigosea-ds-scope-note-size); line-height: var(--aigosea-ds-scope-note-leading); }
.aigosea-ds-type-nav { font-size: var(--aigosea-ds-nav-size); font-weight: var(--aigosea-ds-weight-label); line-height: var(--aigosea-ds-control-leading); }
.aigosea-ds-type-button { font-size: var(--aigosea-ds-button-size); font-weight: var(--aigosea-ds-weight-button); line-height: var(--aigosea-ds-control-leading); }
.aigosea-ds-type-label { font-size: var(--aigosea-ds-label-size); font-weight: var(--aigosea-ds-weight-label); line-height: var(--aigosea-ds-control-leading); }
.aigosea-ds-type-metric { font-size: var(--aigosea-ds-metric-size); font-weight: var(--aigosea-ds-weight-metric); font-variant-numeric: tabular-nums; line-height: var(--aigosea-ds-metric-leading); }
.aigosea-ds-type-table-header { font-size: var(--aigosea-ds-table-header-size); font-weight: var(--aigosea-ds-weight-heading); line-height: var(--aigosea-ds-caption-leading); }
.aigosea-ds-type-table-body { font-size: var(--aigosea-ds-table-body-size); line-height: var(--aigosea-ds-caption-leading); }

.aigosea-ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aigosea-ds-space-2);
  box-sizing: border-box;
  min-block-size: var(--aigosea-ds-button-height);
  max-inline-size: 100%;
  padding: var(--aigosea-ds-space-2) var(--aigosea-ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--aigosea-ds-radius-control);
  font-family: var(--aigosea-ds-font-family);
  font-size: var(--aigosea-ds-button-size);
  font-weight: var(--aigosea-ds-weight-button);
  line-height: var(--aigosea-ds-control-leading);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.aigosea-ds-button--primary { background: var(--aigosea-ds-action-primary); color: var(--aigosea-ds-surface); }
.aigosea-ds-button--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--aigosea-ds-action-hover); }
.aigosea-ds-button--secondary { background: var(--aigosea-ds-surface); color: var(--aigosea-ds-action-primary); border-color: var(--aigosea-ds-border-strong); }
.aigosea-ds-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--aigosea-ds-action-soft); }
.aigosea-ds-button:is(:disabled, [aria-disabled="true"]) { color: var(--aigosea-ds-text-secondary); background: var(--aigosea-ds-surface-subtle); border-color: var(--aigosea-ds-border); cursor: not-allowed; }

.aigosea-ds-action {
  color: var(--aigosea-ds-action-primary);
  font-family: var(--aigosea-ds-font-family);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.aigosea-ds-action:hover { color: var(--aigosea-ds-action-hover); }

.aigosea-ds-card, .aigosea-ds-evidence {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: var(--aigosea-ds-card-padding);
  border: 1px solid var(--aigosea-ds-border);
  color: var(--aigosea-ds-text-body);
  background: var(--aigosea-ds-surface);
}
.aigosea-ds-card { border-radius: var(--aigosea-ds-radius-card); box-shadow: var(--aigosea-ds-shadow-none); }
.aigosea-ds-evidence { padding: var(--aigosea-ds-space-5); border-radius: var(--aigosea-ds-radius-feature); box-shadow: var(--aigosea-ds-shadow-low); }

.aigosea-ds-status {
  display: inline-flex;
  align-items: center;
  gap: var(--aigosea-ds-space-1);
  box-sizing: border-box;
  max-inline-size: 100%;
  padding: var(--aigosea-ds-space-1) var(--aigosea-ds-space-2);
  border: 1px solid var(--aigosea-ds-chip-border, var(--aigosea-ds-status-neutral-border));
  border-radius: var(--aigosea-ds-radius-state);
  background: var(--aigosea-ds-chip-bg, var(--aigosea-ds-status-neutral-bg));
  color: var(--aigosea-ds-chip-fg, var(--aigosea-ds-status-neutral-fg));
  font-family: var(--aigosea-ds-font-family);
  font-size: var(--aigosea-ds-caption-size);
  font-weight: var(--aigosea-ds-weight-label);
  line-height: var(--aigosea-ds-caption-leading);
}
.aigosea-ds-status--success { --aigosea-ds-chip-fg: var(--aigosea-ds-status-success-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-success-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-success-border); }
.aigosea-ds-status--info { --aigosea-ds-chip-fg: var(--aigosea-ds-status-info-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-info-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-info-border); }
.aigosea-ds-status--warning { --aigosea-ds-chip-fg: var(--aigosea-ds-status-warning-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-warning-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-warning-border); }
.aigosea-ds-status--danger { --aigosea-ds-chip-fg: var(--aigosea-ds-status-danger-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-danger-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-danger-border); }
.aigosea-ds-status--neutral { --aigosea-ds-chip-fg: var(--aigosea-ds-status-neutral-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-neutral-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-neutral-border); }
.aigosea-ds-status--paused { --aigosea-ds-chip-fg: var(--aigosea-ds-status-paused-fg); --aigosea-ds-chip-bg: var(--aigosea-ds-status-paused-bg); --aigosea-ds-chip-border: var(--aigosea-ds-status-paused-border); }

.aigosea-ds-container, .aigosea-ds-reading-container {
  box-sizing: border-box;
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--aigosea-ds-gutter);
}
.aigosea-ds-container { max-inline-size: var(--aigosea-ds-container-marketing); }
.aigosea-ds-reading-container { max-inline-size: calc(var(--aigosea-ds-container-reading) + 2 * var(--aigosea-ds-gutter)); }

.aigosea-ds-scope-note {
  color: var(--aigosea-ds-text-body);
  font-family: var(--aigosea-ds-font-family);
  font-size: var(--aigosea-ds-scope-note-size);
  font-weight: var(--aigosea-ds-weight-body);
  line-height: var(--aigosea-ds-scope-note-leading);
}

.aigosea-ds-focus:focus-visible, .aigosea-ds-button:focus-visible, .aigosea-ds-action:focus-visible {
  outline: var(--aigosea-ds-focus-width) solid var(--aigosea-ds-focus-color);
  outline-offset: var(--aigosea-ds-focus-offset);
}