/* SuperTop ERP & Topsoft Tech · design tokens · v1.1 · 2026-11-01
   Theme: Fresh Field (THEME_SPEC_v3). Fonts: Figtree + Noto Sans SC (SIL OFL, fonts.google.com).
   Usage: <link rel="stylesheet" href="tokens.css">, then use var(--st-...). Add data-theme="dark" on a dark module/section. */

:root {
  /* color · core */
  --st-color-brand-green: #1E9E57; /* Brand green — logo, graphics, large display text only (3.45:1 on white; not for body text) */
  --st-color-button-green: #147A41; /* Text-safe green — primary button background (white text 5.4:1), links, wordmark accent on light */
  --st-color-button-green-hover: #10663A; /* Primary button hover / pressed (white text 7.04:1) */
  --st-color-black: #121814; /* Brand black — wordmark, dark backgrounds */
  --st-color-white: #FFFFFF; /* Page background */
  --st-color-text: #1B2420; /* Body text */
  --st-color-muted: #5B6660; /* Secondary text, byline on light */
  --st-color-border: #DFE4DC; /* Dividers, card borders (decorative) */
  --st-color-surface: #F5F6F1; /* Warm white — section / app canvas background */
  --st-color-surface-2: #EAF6EE; /* Light green block, success chip, active nav */
  --st-color-mint: #C9F0D6; /* Mint — logo joint, tags, graphic accents */
  --st-color-dark-bg: #121814; /* Dark module / dark header / footer background */
  --st-color-dark-text: #F4F7F4; /* Text on dark */
  --st-color-dark-green: #5FD68F; /* Bright green on dark — accent, links, primary button on dark, wordmark accent on dark */
  --st-color-dark-muted: #9FB0A6; /* Secondary text and byline on dark (7.92:1) */
  --st-color-dark-surface: #1A221D; /* Card background inside dark modules (confirmed 2026-11-01) */
  --st-color-dark-border: #2A3631; /* Card border / divider on dark (decorative) */
  --st-color-dark-border-strong: #6B7A72; /* Ghost button / input border on dark (3.99:1) */
  --st-color-dark-green-hover: #7FE0A6; /* Primary button hover on dark (dark text 11.24:1; confirmed 2026-11-01) */
  --st-color-border-strong: #878F8A; /* Input border (3.32:1 on white; confirmed 2026-11-01) */
  --st-color-success-fg: #147A41; /* Success chip text (confirmed 2026-11-01) */
  --st-color-success-bg: #EAF6EE; /* Success chip background (confirmed 2026-11-01) */
  --st-color-warning-fg: #8A5A00; /* Warning chip text (confirmed 2026-11-01) */
  --st-color-warning-bg: #FFF4D6; /* Warning chip background (confirmed 2026-11-01) */
  --st-color-danger-fg: #B42318; /* Danger chip text / destructive button bg (confirmed 2026-11-01) */
  --st-color-danger-bg: #FDECEA; /* Danger chip background (confirmed 2026-11-01) */
  --st-color-info-fg: #1F5AA6; /* Info chip text (confirmed 2026-11-01) */
  --st-color-info-bg: #E8F0FB; /* Info chip background (confirmed 2026-11-01) */
  --st-color-neutral-fg: #5B6660; /* Neutral chip text (confirmed 2026-11-01) */
  --st-color-neutral-bg: #F5F6F1; /* Neutral chip background (confirmed 2026-11-01) */

  /* semantic aliases (light) */
  --st-bg: var(--st-color-white);
  --st-bg-section: var(--st-color-surface);
  --st-bg-subtle: var(--st-color-surface-2);
  --st-fg: var(--st-color-text);
  --st-fg-muted: var(--st-color-muted);
  --st-fg-heading: var(--st-color-black);
  --st-line: var(--st-color-border);
  --st-line-strong: var(--st-color-border-strong);
  --st-accent: var(--st-color-mint);
  --st-brand: var(--st-color-brand-green);
  --st-action: var(--st-color-button-green);
  --st-action-hover: var(--st-color-button-green-hover);
  --st-action-fg: var(--st-color-white);
  --st-link: var(--st-color-button-green);
  --st-wordmark-accent: var(--st-color-button-green);
  --st-byline: var(--st-color-muted);

  /* font */
  --st-font-family-heading: 'Figtree', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --st-font-family-body: 'Figtree', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --st-font-family-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --st-font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --st-font-weight-regular: 400;
  --st-font-weight-medium: 500;
  --st-font-weight-semibold: 600;
  --st-font-weight-bold: 700;
  --st-font-weight-extrabold: 800;

  /* type scale · website */
  --st-web-h1-size: 58px; --st-web-h1-lh: 1.06; --st-web-h1-weight: 800; --st-web-h1-ls: -0.025em;
  --st-web-h2-size: 38px; --st-web-h2-lh: 1.15; --st-web-h2-weight: 800; --st-web-h2-ls: -0.015em;
  --st-web-h3-size: 22px; --st-web-h3-lh: 1.3; --st-web-h3-weight: 700; --st-web-h3-ls: 0;
  --st-web-body-lg-size: 18px; --st-web-body-lg-lh: 1.6; --st-web-body-lg-weight: 400; --st-web-body-lg-ls: 0;
  --st-web-body-size: 16px; --st-web-body-lh: 1.6; --st-web-body-weight: 400; --st-web-body-ls: 0;
  --st-web-small-size: 14px; --st-web-small-lh: 1.5; --st-web-small-weight: 400; --st-web-small-ls: 0;
  --st-web-eyebrow-size: 13px; --st-web-eyebrow-lh: 1.4; --st-web-eyebrow-weight: 800; --st-web-eyebrow-ls: 0.06em;

  /* type scale · app */
  --st-app-page-title-size: 24px; --st-app-page-title-lh: 1.25; --st-app-page-title-weight: 800; --st-app-page-title-ls: -0.01em;
  --st-app-section-title-size: 18px; --st-app-section-title-lh: 1.3; --st-app-section-title-weight: 700; --st-app-section-title-ls: 0;
  --st-app-card-title-size: 15px; --st-app-card-title-lh: 1.35; --st-app-card-title-weight: 700; --st-app-card-title-ls: 0;
  --st-app-body-size: 14px; --st-app-body-lh: 1.5; --st-app-body-weight: 400; --st-app-body-ls: 0;
  --st-app-label-size: 13px; --st-app-label-lh: 1.4; --st-app-label-weight: 600; --st-app-label-ls: 0;
  --st-app-caption-size: 12px; --st-app-caption-lh: 1.4; --st-app-caption-weight: 500; --st-app-caption-ls: 0;
  --st-app-table-header-size: 11px; --st-app-table-header-lh: 1.3; --st-app-table-header-weight: 800; --st-app-table-header-ls: 0.06em;
  --st-zh-lh-offset: 0.1;

  /* spacing (4px base) */
  --st-space-0: 0px;
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;
  --st-space-8: 32px;
  --st-space-10: 40px;
  --st-space-12: 48px;
  --st-space-16: 64px;
  --st-space-20: 80px;
  --st-space-24: 96px;

  /* radius */
  --st-radius-xs: 6px;
  --st-radius-sm: 8px;
  --st-radius-md: 12px;
  --st-radius-lg: 16px;
  --st-radius-xl: 22px;
  --st-radius-pill: 999px;

  /* shadow */
  --st-shadow-none: none;
  --st-shadow-sm: 0 1px 2px rgba(18, 24, 20, 0.06);
  --st-shadow-card: 0 1px 2px rgba(18, 24, 20, 0.04), 0 8px 24px -12px rgba(18, 24, 20, 0.18);
  --st-shadow-raised: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  --st-shadow-focus: 0 0 0 3px rgba(20, 122, 65, 0.28);
  --st-shadow-focus-dark: 0 0 0 3px rgba(95, 214, 143, 0.40);

  /* layout */
  --st-container-max: 1280px;
  --st-page-gutter-desktop: 64px;
  --st-page-gutter-mobile: 20px;
  --st-section-y-desktop: 96px;
  --st-section-y-mobile: 56px;
  --st-header-height: 76px;
  --st-app-sidebar-width: 240px;
  --st-app-topbar-height: 60px;
  --st-breakpoint-md: 768px;
  --st-breakpoint-lg: 1024px;
  --st-breakpoint-xl: 1280px;
}

/* dark context: AI modules, dark header, footer */
[data-theme="dark"] {
  --st-bg: var(--st-color-dark-bg);
  --st-bg-section: var(--st-color-dark-bg);
  --st-bg-subtle: var(--st-color-dark-surface);
  --st-fg: var(--st-color-dark-text);
  --st-fg-heading: var(--st-color-dark-text);
  --st-fg-muted: var(--st-color-dark-muted);
  --st-line: var(--st-color-dark-border);
  --st-line-strong: var(--st-color-dark-border-strong);
  --st-action: var(--st-color-dark-green);
  --st-action-hover: var(--st-color-dark-green-hover);
  --st-action-fg: var(--st-color-black);
  --st-link: var(--st-color-dark-green);
  --st-wordmark-accent: var(--st-color-dark-green);
  --st-byline: var(--st-color-dark-muted);
  background: var(--st-bg); color: var(--st-fg);
}

/* base */
body { font-family: var(--st-font-family-body); color: var(--st-fg); background: var(--st-bg); font-size: var(--st-web-body-size); line-height: var(--st-web-body-lh); }
:lang(zh) { line-height: calc(var(--st-web-body-lh) + var(--st-zh-lh-offset)); }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { font-weight: 700; }
a { color: var(--st-link); } a:hover { color: var(--st-action-hover); }

/* components (reference implementation) */
.st-btn { display: inline-flex; align-items: center; gap: var(--st-space-2); padding: 15px 26px; border-radius: var(--st-radius-pill);
  font: 700 16px/1 var(--st-font-family-body); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; }
.st-btn--sm { padding: 9px 16px; font-size: 14px; }
.st-btn--primary { background: var(--st-action); color: var(--st-action-fg); }
.st-btn--primary:hover { background: var(--st-action-hover); }
.st-btn--secondary { background: transparent; color: var(--st-fg); border-color: var(--st-color-border); }
.st-btn--secondary:hover { background: var(--st-color-surface); }
[data-theme="dark"] .st-btn--secondary { border-color: var(--st-color-dark-border-strong); }
[data-theme="dark"] .st-btn--secondary:hover { background: var(--st-color-dark-surface); }
.st-btn--danger { background: var(--st-color-danger-fg); color: var(--st-color-white); }
.st-btn:disabled, .st-btn[aria-disabled="true"] { background: var(--st-color-border); color: var(--st-color-muted); border-color: transparent; cursor: not-allowed; }
.st-btn:focus-visible, .st-input:focus-visible { outline: none; box-shadow: var(--st-shadow-focus); }
[data-theme="dark"] .st-btn:focus-visible { box-shadow: var(--st-shadow-focus-dark); }

.st-card { background: var(--st-color-white); border: 1px solid var(--st-color-border); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-card); padding: var(--st-space-5); }
[data-theme="dark"] .st-card { background: var(--st-color-dark-surface); border-color: var(--st-color-dark-border); box-shadow: none; }

.st-input { height: 40px; padding: 0 var(--st-space-3); border: 1px solid var(--st-color-border-strong); border-radius: var(--st-radius-md);
  background: var(--st-color-white); color: var(--st-color-text); font: 400 14px/1.5 var(--st-font-family-body); }
.st-input:focus { border-color: var(--st-color-button-green); }
.st-input[aria-invalid="true"] { border-color: var(--st-color-danger-fg); }

.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--st-radius-pill); font: 700 12px/1.3 var(--st-font-family-body); }
.st-chip--success { background: var(--st-color-success-bg); color: var(--st-color-success-fg); }
.st-chip--warning { background: var(--st-color-warning-bg); color: var(--st-color-warning-fg); }
.st-chip--danger  { background: var(--st-color-danger-bg);  color: var(--st-color-danger-fg); }
.st-chip--info    { background: var(--st-color-info-bg);    color: var(--st-color-info-fg); }
.st-chip--neutral { background: var(--st-color-neutral-bg); color: var(--st-color-neutral-fg); }

.st-nav-item { display: flex; align-items: center; gap: var(--st-space-3); padding: 9px 12px; border-radius: var(--st-radius-md); color: var(--st-fg); font: 600 14px/1.3 var(--st-font-family-body); }
.st-nav-item[aria-current="page"] { background: var(--st-color-surface-2); color: var(--st-color-button-green); }
[data-theme="dark"] .st-nav-item { color: var(--st-color-dark-muted); }
[data-theme="dark"] .st-nav-item[aria-current="page"] { background: var(--st-color-dark-surface); color: var(--st-color-dark-green); }