/**
 * SmartBiz Design Tokens — site-wide Typography & UI scale
 * Canonical baseline = 一般辦公版 (office): clean, dense-enough business SaaS.
 * UI modes (office / pro / mobile). senior is DEPRECATED and maps to office.
 *
 * Prefer var(--sb-*) in shared CSS and page styles. Avoid one-off px font sizes.
 */

:root {
  /* —— Brand / color —— */
  --sb-color-primary: #2563eb;
  --sb-color-primary-soft: #eff6ff;
  --sb-color-success: #16a34a;
  --sb-color-warning: #f59e0b;
  --sb-color-danger: #dc2626;
  --sb-color-info: #0891b2;

  --sb-color-bg: #f8fafc;
  --sb-color-surface: #ffffff;
  --sb-color-surface-muted: #f8fafc;
  --sb-color-sidebar: #1e293b;
  --sb-color-sidebar-hover: #334155;
  --sb-color-sidebar-text: #e2e8f0;
  --sb-color-header: #ffffff;

  --sb-color-border: #e5e7eb;
  --sb-color-border-strong: #cbd5e1;
  --sb-color-text: #111827;
  --sb-color-text-secondary: #6b7280;
  --sb-color-text-muted: #64748b;

  /* —— Typography scale (office baseline) —— */
  --sb-font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
  --sb-font-size-body: 14.5px;
  --sb-font-size-table: 13.5px;
  --sb-font-size-label: 13.5px;
  --sb-font-size-input: 14px;
  --sb-font-size-page-title: 23px;
  --sb-font-size-section: 17px;
  --sb-font-size-button: 14px;
  --sb-font-size-help: 12.5px;
  --sb-font-size-badge: 12px;
  --sb-font-size-metric: 22px;
  --sb-font-size-total: 20px;

  --sb-font-weight-regular: 400;
  --sb-font-weight-medium: 500;
  --sb-font-weight-semibold: 600;
  --sb-font-weight-bold: 700;

  --sb-line-height: 1.5;
  --sb-line-height-tight: 1.35;
  --sb-line-height-title: 1.3;

  /* —— Spacing —— */
  --sb-space-1: 4px;
  --sb-space-2: 8px;
  --sb-space-3: 12px;
  --sb-space-4: 16px;
  --sb-space-5: 20px;
  --sb-space-6: 24px;
  --sb-space-8: 32px;

  --sb-content-padding: 24px;
  --sb-card-padding: 16px;
  --sb-input-padding-y: 8px;
  --sb-input-padding-x: 10px;
  --sb-btn-padding-y: 8px;
  --sb-btn-padding-x: 14px;
  --sb-table-cell-padding: 10px 12px;

  /* —— Radius / elevation —— */
  --sb-radius-sm: 6px;
  --sb-radius: 10px;
  --sb-radius-lg: 12px;
  --sb-radius-pill: 999px;
  --sb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sb-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

  /* —— Layout —— */
  --sb-sidebar-width: 220px;
  --sb-topbar-height: 52px;
  --sb-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

/* Mode overlays remap token values; components always read --sb-* */
body.ui-office,
.ui-office {
  --sb-font-size-body: 14.5px;
  --sb-font-size-table: 13.5px;
  --sb-font-size-label: 13.5px;
  --sb-font-size-input: 14px;
  --sb-font-size-page-title: 23px;
  --sb-font-size-section: 17px;
  --sb-font-size-button: 14px;
  --sb-font-size-help: 12.5px;
  --sb-content-padding: 24px;
  --sb-btn-padding-y: 8px;
  --sb-btn-padding-x: 14px;
  --sb-input-padding-y: 8px;
  --sb-table-cell-padding: 10px 12px;
  --sb-radius: 10px;
}

body.ui-pro,
.ui-pro {
  /* Slightly denser than office; keep readable floors */
  --sb-font-size-body: 14px;
  --sb-font-size-table: 13px;
  --sb-font-size-label: 13px;
  --sb-font-size-input: 14px;
  --sb-font-size-page-title: 21px;
  --sb-font-size-section: 16px;
  --sb-font-size-button: 14px;
  --sb-font-size-help: 12.5px;
  --sb-font-size-metric: 20px;
  --sb-font-size-total: 18px;
  --sb-content-padding: 20px;
  --sb-card-padding: 14px;
  --sb-btn-padding-y: 7px;
  --sb-btn-padding-x: 12px;
  --sb-input-padding-y: 7px;
  --sb-table-cell-padding: 8px 10px;
  --sb-topbar-height: 48px;
  --sb-radius: 8px;
}

/* senior is DEPRECATED: keep selector for legacy classnames, identical to office */
body.ui-senior,
.ui-senior {
  --sb-font-size-body: 14.5px;
  --sb-font-size-table: 13.5px;
  --sb-font-size-label: 13.5px;
  --sb-font-size-input: 14px;
  --sb-font-size-page-title: 23px;
  --sb-font-size-section: 17px;
  --sb-font-size-button: 14px;
  --sb-font-size-help: 12.5px;
  --sb-content-padding: 24px;
  --sb-btn-padding-y: 8px;
  --sb-btn-padding-x: 14px;
  --sb-input-padding-y: 8px;
  --sb-table-cell-padding: 10px 12px;
  --sb-radius: 10px;
}

/* mobile = responsive layout affordances; NOT enlarged elderly type */
body.ui-mobile,
.ui-mobile {
  --sb-font-size-body: 14.5px;
  --sb-font-size-table: 13.5px;
  --sb-font-size-label: 13.5px;
  --sb-font-size-input: 14px;
  --sb-font-size-page-title: 22px;
  --sb-font-size-section: 17px;
  --sb-font-size-button: 14px;
  --sb-font-size-help: 12.5px;
  --sb-content-padding: 16px;
  --sb-card-padding: 16px;
  --sb-btn-padding-y: 10px;
  --sb-btn-padding-x: 14px;
  --sb-input-padding-y: 10px;
  --sb-radius: 10px;
  --sb-sidebar-width: 100%;
}