/* Liubai Design Tokens v1.1 — Monochrome Premium SaaS (values aligned with design preview v2.2).
   Canonical source: design-system/tokens/liubai-tokens.css. Products vendor an exact copy
   (checked by design-system/scripts/check-sync.mjs). Do not edit vendored copies. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand palette (neutral greys with a faint cool tint) */
  --lb-obsidian: #0A0A0B;
  --lb-graphite: #141416;
  --lb-dark-gray: #2E2E33;
  --lb-metallic: #6B7079; /* palette only; components use --lb-icon */
  --lb-silver: #C9CDD3;
  --lb-light-silver: #E3E6EA;
  --lb-cool-white: #F4F4F5;
  --lb-white: #FFFFFF;

  /* Surfaces: depth by lightness, never by color */
  --lb-bg: #0A0A0B;
  --lb-surface: #141416;
  --lb-surface-raised: #1A1A1D;
  --lb-surface-sunken: #0F0F11;
  --lb-sidebar: #0A0A0B;
  --lb-chrome: #0A0A0B; /* fully opaque: nothing scrolls through the sticky header */
  --lb-overlay: rgb(5 5 6 / 0.72);

  /* Text */
  --lb-text: #F4F4F5;
  --lb-text-strong: #FFFFFF;
  --lb-text-secondary: #A1A1AA;
  --lb-text-muted: #8A8A93;
  --lb-text-inverse: #0A0A0B;
  --lb-icon: #A1A1AA;
  --lb-marker: #C9CDD3;

  /* Lines */
  --lb-divider: #2E2E33;
  --lb-border: #3F3F46;
  --lb-border-strong: #6B6B74;
  --lb-divider-sheen: linear-gradient(90deg, transparent, #3F3F46 50%, transparent);

  /* Actions. *-bg are solid fallbacks (also used by the contrast gate); *-fill are the rendered material. */
  --lb-primary-bg: #D9DCE1;
  --lb-primary-bg-hover: #E6E8EC;
  --lb-primary-text: #0A0A0B;
  --lb-primary-fill: linear-gradient(135deg, #F5F6F8 0%, #D9DCE1 35%, #B4B9C1 65%, #E8EAEE 100%);
  --lb-primary-fill-hover: linear-gradient(135deg, #FFFFFF 0%, #E6E8EC 35%, #C4C8CF 65%, #F2F3F5 100%);
  --lb-primary-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 8px 24px -10px rgb(201 205 211 / 0.45);
  --lb-secondary-bg: transparent;
  --lb-secondary-bg-hover: #232326;
  --lb-secondary-text: #F4F4F5;
  --lb-ghost-hover: #232326;
  --lb-selected-bg: #232326;
  --lb-selected-fill: #F4F4F5;
  --lb-selected-text: #0A0A0B;
  --lb-check-fill: linear-gradient(135deg, #F5F6F8 0%, #D9DCE1 35%, #B4B9C1 65%, #E8EAEE 100%);
  --lb-check-mark: #0A0A0B;
  --lb-stat-text: linear-gradient(180deg, #FFFFFF 0%, #C9CDD3 100%);
  --lb-focus: #E3E6EA;

  /* Status: restrained, only for meaning, always with text or icon. Never a brand accent. */
  --lb-danger: #F2A19C;
  --lb-danger-bg: #2A1716;
  --lb-danger-border: #6B2F2C;
  --lb-warning: #E8CF9A;
  --lb-warning-bg: #2A2215;
  --lb-warning-border: #5E4A24;
  --lb-success: #E4E4E7;
  --lb-success-bg: #1C1C1F;
  --lb-success-border: #3F3F46;
  --lb-info: #B4C3D6;

  --lb-shadow-overlay: 0 24px 64px rgb(0 0 0 / 0.5), 0 0 0 1px var(--lb-border);
  --lb-shadow-toast: 0 12px 32px rgb(0 0 0 / 0.45);
}

:root[data-theme="light"] {
  color-scheme: light;
  --lb-bg: #FFFFFF;
  --lb-surface: #FAFAFA;
  --lb-surface-raised: #FFFFFF;
  --lb-surface-sunken: #FFFFFF;
  --lb-sidebar: #FFFFFF;
  --lb-chrome: #FFFFFF;
  --lb-overlay: rgb(10 10 11 / 0.42);

  --lb-text: #18181B;
  --lb-text-strong: #0A0A0B;
  --lb-text-secondary: #52525B;
  --lb-text-muted: #67676F;
  --lb-text-inverse: #FFFFFF;
  --lb-icon: #6B7079;
  --lb-marker: #6B7079;

  --lb-divider: #E4E4E7;
  --lb-border: #D4D4D8;
  --lb-border-strong: #8A8A93;
  --lb-divider-sheen: linear-gradient(90deg, transparent, #C9CDD3 50%, transparent);

  --lb-primary-bg: #1F2125;
  --lb-primary-bg-hover: #2A2D33;
  --lb-primary-text: #FFFFFF;
  --lb-primary-fill: linear-gradient(135deg, #45484F 0%, #1F2125 40%, #121316 62%, #34373D 100%);
  --lb-primary-fill-hover: linear-gradient(135deg, #4A4E56 0%, #2A2D33 40%, #1A1B1F 62%, #3A3D44 100%);
  --lb-primary-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 1px #C9CDD3, 0 8px 20px -10px rgb(10 10 11 / 0.45);
  --lb-secondary-bg: transparent;
  --lb-secondary-bg-hover: #F4F4F5;
  --lb-secondary-text: #18181B;
  --lb-ghost-hover: #F4F4F5;
  --lb-selected-bg: #F4F4F5;
  --lb-selected-fill: #18181B;
  --lb-selected-text: #FFFFFF;
  --lb-check-fill: linear-gradient(135deg, #45484F 0%, #1F2125 50%, #34373D 100%);
  --lb-check-mark: #FFFFFF;
  --lb-stat-text: linear-gradient(180deg, #18181B 0%, #52525B 100%);
  --lb-focus: #18181B;

  --lb-danger: #B42318;
  --lb-danger-bg: #FBEDEC;
  --lb-danger-border: #E7B4B1;
  --lb-warning: #8A5300;
  --lb-warning-bg: #FBF3E3;
  --lb-warning-border: #E6CF9E;
  --lb-success: #3F3F46;
  --lb-success-bg: #F4F4F5;
  --lb-success-border: #D4D4D8;
  --lb-info: #3B5470;

  --lb-shadow-overlay: 0 24px 64px rgb(10 10 11 / 0.18), 0 0 0 1px var(--lb-border);
  --lb-shadow-toast: 0 12px 32px rgb(10 10 11 / 0.16);
}

:root {
  /* Typography: Traditional Chinese first, system fonts only (no webfont download) */
  --lb-font-sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lb-text-xs: 13px;    /* minimum: secondary text, captions, tables */
  --lb-text-sm: 13px;
  --lb-text-ui: 14px;    /* buttons, tabs, sidebar items, field labels, toasts */
  --lb-text-md: 15px;    /* body */
  --lb-text-input: 16px; /* inputs, selects, textareas (prevents iOS zoom) */
  --lb-text-lg: 16px;    /* task names, small headings */
  --lb-text-xl: 20px;    /* card titles */
  --lb-text-2xl: 26px;   /* app page titles (mobile and desktop) */
  --lb-text-3xl: 34px;   /* marketing headline, desktop only */
  --lb-leading-tight: 1.3;
  --lb-leading-body: 1.7;
  --lb-weight-regular: 400;
  --lb-weight-medium: 500;
  --lb-weight-semibold: 600;
  --lb-tracking-label: 0.08em;

  /* Spacing: 4px base */
  --lb-space-1: 4px;  --lb-space-2: 8px;  --lb-space-3: 12px; --lb-space-4: 16px;
  --lb-space-5: 20px; --lb-space-6: 24px; --lb-space-8: 32px; --lb-space-10: 40px;
  --lb-space-12: 48px; --lb-space-16: 64px;
  --lb-gap-inline: 12px;     /* between buttons in a group */
  --lb-pad-card: 24px;       /* CRM list cards use 20px on mobile */
  --lb-pad-card-lg: 40px;
  --lb-gap-section: 48px;    /* CRM today on mobile uses 24–32px */

  /* Radius */
  --lb-radius-sm: 4px; --lb-radius-md: 8px; --lb-radius-lg: 14px; --lb-radius-xl: 20px; --lb-radius-pill: 999px;

  /* Sizing */
  --lb-control-h: 44px;      /* every control, including primary buttons */
  --lb-touch: 44px;          /* minimum touch target */
  --lb-sidebar-w: 260px;
  --lb-content-max: 1200px;
  --lb-measure: 68ch;        /* long-form reading width */

  /* Motion: only for state change */
  --lb-ease: cubic-bezier(0.2, 0, 0, 1);
  --lb-duration-fast: 120ms;
  --lb-duration: 180ms;

  /* Layers */
  --lb-z-sticky: 10; --lb-z-dialog: 50; --lb-z-toast: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root { --lb-duration-fast: 0ms; --lb-duration: 0ms; }
}