/* Light workspace foundation. Loaded synchronously to prevent a dark first paint. */

:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --bg-soft: #f7faf8;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #edf6f0;
  --border: #d8e3dc;
  --border-hi: #9bc8ad;
  --text: #183028;
  --text-primary: #183028;
  --text-dim: #4f645a;
  --text-secondary: #4f645a;
  --text-mute: #5f7369;
  --accent: #147a46;
  --accent-strong: #0f6b3c;
  --accent-soft: #e4f3e9;
  --green: #147a46;
  --amber: #95570d;
  --amber-dim: rgba(149, 87, 13, 0.18);
  --amber-glow: rgba(149, 87, 13, 0.08);
  --red: #c43f4f;
  --blue: #2868a8;
  --cyan: #167f8f;
  --violet: #7156a6;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(18, 48, 35, 0.06), 0 6px 18px rgba(18, 48, 35, 0.04);
  --shadow-glow: 0 0 0 1px rgba(22, 131, 75, 0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-sheet: 16px;
  --control-height: 44px;
  --page-inline-mobile: 10px;
  --page-inline-desktop: 32px;
  --content-max-width: 1600px;
  --touch-target: 44px;
  --mobile-nav-height: 56px;
  --mobile-content-bottom-inset: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  --surface-success: #edf7f0;
  --surface-warning: #fff8e9;
  --surface-danger: #fff1f3;
  --surface-info: #eff7fd;
  --border-success: #a8cfb7;
  --border-warning: #e8c996;
  --border-danger: #e9b8bf;
  --border-info: #bdd6ea;
}

html,
body,
#app,
#main-app {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

* { scrollbar-color: #a9bdb1 #edf2ef; }
::-webkit-scrollbar-thumb { background: #a9bdb1; }
::-webkit-scrollbar-track { background: #edf2ef; }

/* The native hidden state is authoritative over component layout declarations. */
:where([hidden]) {
  display: none !important;
}

/* Readable Chinese typography baseline. */
:root {
  --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: "SFMono-Regular", Consolas, "Roboto Mono", "Courier New", monospace;
  --type-caption: 12px;
  --type-meta: 13px;
  --type-body: 14px;
  --type-control: 14px;
  --leading-compact: 1.35;
  --leading-body: 1.65;
}

html {
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

#main-content :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0;
  text-wrap: balance;
}

#main-content h1 { line-height: 1.2; }
#main-content h2 { line-height: 1.25; }
#main-content h3 { line-height: 1.3; }

#main-content :is(strong, b) { letter-spacing: 0; }

#main-content :is(p, li, dd, dt, td, th, label) {
  overflow-wrap: break-word;
  word-break: normal;
}

#main-content p { line-height: var(--leading-body); }

#main-content small,
#main-content :is(.stat-sub, .ui-control-label, .ui-panel-kicker, .ui-meta, .muted, .text-muted) {
  font-size: var(--type-caption) !important;
  line-height: 1.5;
  letter-spacing: 0;
}

#main-content :is(
  .annual-hazard-save-dock > span,
  .annual-hazard-access-action,
  .annual-hazard-access-bar > span,
  .annual-hazard-search > span,
  .skill-intel-hero-copy > span,
  .skill-intel-profile-card > span,
  .skill-intel-filters label > span,
  .skill-history-heading > div > span
) {
  font-size: var(--type-caption);
  line-height: 1.5;
  letter-spacing: 0;
}

#main-content :is([class*="-metric"], [class*="-stat"]) > span {
  font-size: var(--type-caption);
  line-height: 1.45;
  letter-spacing: 0;
}

#main-content .annual-hazard-access[open] .annual-hazard-access-action::after {
  font-size: var(--type-caption);
}

#main-content label:not(.sr-only),
#main-content :is(th, td) {
  font-size: max(var(--type-caption), 0.86em);
  line-height: 1.5;
}

#main-content :is(button, [role="button"], summary) {
  font-family: var(--font-sans);
  font-size: max(var(--type-meta), 0.93em);
  line-height: var(--leading-compact);
}

#main-content :is(input, select, textarea) {
  font-family: var(--font-sans);
  font-size: var(--type-control);
  line-height: 1.45;
}

#main-content :is(
  [class*="score"],
  [class*="metric"],
  [class*="value"],
  [class*="count"],
  [class*="rank"],
  time
) {
  font-variant-numeric: tabular-nums lining-nums;
}

#main-content :is(.page-title p, .board-module-head p, .board-hero-copy p, .stat-sub) {
  color: var(--text-dim);
  opacity: 1;
}

@media (max-width: 560px) {
  :root {
    --type-caption: 12px;
    --type-meta: 13px;
    --type-body: 15px;
    --type-control: 16px;
    --page-inline-desktop: var(--page-inline-mobile);
  }

  #main-content :is(.page-title h1, .board-module-head h2, .board-hero-copy h2) {
    font-size: 28px;
    line-height: 1.2;
  }

  #main-content :is(button, [role="button"], summary) { font-size: 14px; }
  #main-content :is(th, td) { font-size: 12px; }
}