/* Liubai Design Tokens v1.3 — 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: var(--lb-selected-bg);
  --lb-selected-text: var(--lb-text-strong);
  --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"] {
  /* Smoky milk-tea Morandi (brand decision 2026-10-26). The nine brand tokens are exact; the rest derive from them.
     Text in the muted role uses #5C554F (same hue as #6D645D, deep enough for WCAG AA on every light surface);
     #6D645D stays for icons and markers. Form fields use --lb-border-strong (3:1, WCAG 1.4.11). */
  color-scheme: light;
  --lb-bg: #E3DBD2;
  --lb-surface: #EDE6DE;
  --lb-surface-muted: #D5C9BD;
  --lb-border: #C9BCAF;
  --lb-text: #332F2B;
  --lb-text-muted: #5C554F;
  --lb-accent: #8B786A;
  --lb-primary: #66574C;
  --lb-primary-text: #FFFFFF;
  --lb-brand-text-muted: #6D645D;

  --lb-surface-raised: #EDE6DE;
  --lb-surface-sunken: #E3DBD2;
  --lb-sidebar: #E3DBD2;
  --lb-chrome: #EDE6DE;
  --lb-overlay: rgb(51 47 43 / 0.42);

  --lb-text-strong: #332F2B;
  --lb-text-secondary: #5C554F;
  --lb-text-inverse: #FFFFFF;
  --lb-icon: #6D645D;
  --lb-marker: #6D645D;

  --lb-divider: #C9BCAF;
  --lb-border-strong: #8B786A;
  --lb-divider-sheen: linear-gradient(90deg, transparent, #C9BCAF 50%, transparent);

  --lb-primary-bg: #66574C;
  --lb-primary-bg-hover: #5A4C42;
  --lb-primary-fill: linear-gradient(135deg, #74655A 0%, #66574C 45%, #5A4C42 100%);
  --lb-primary-fill-hover: linear-gradient(135deg, #6A5B50 0%, #5A4C42 45%, #4F433A 100%);
  --lb-primary-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 0 1px #C9BCAF, 0 8px 20px -10px rgb(51 47 43 / 0.40);
  --lb-secondary-bg: transparent;
  --lb-secondary-bg-hover: #D5C9BD;
  --lb-secondary-text: #332F2B;
  --lb-ghost-hover: #D5C9BD;
  --lb-selected-bg: #D5C9BD;
  --lb-selected-fill: var(--lb-selected-bg);
  --lb-selected-text: var(--lb-text-strong);
  --lb-check-fill: linear-gradient(135deg, #74655A 0%, #66574C 50%, #5A4C42 100%);
  --lb-check-mark: #FFFFFF;
  --lb-stat-text: linear-gradient(180deg, #332F2B 0%, #5C554F 100%);
  --lb-focus: #66574C;

  --lb-danger: #B42318;
  --lb-danger-bg: #FBEDEC;
  --lb-danger-border: #E7B4B1;
  --lb-warning: #8A5300;
  --lb-warning-bg: #FBF3E3;
  --lb-warning-border: #E6CF9E;
  --lb-success: #3F3A35;
  --lb-success-bg: #E3DBD2;
  --lb-success-border: #C9BCAF;
  --lb-info: #3B5470;

  --lb-shadow-overlay: 0 24px 64px rgb(51 47 43 / 0.20), 0 0 0 1px var(--lb-border);
  --lb-shadow-toast: 0 12px 32px rgb(51 47 43 / 0.18);
}

: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: 14px;
  --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: 18px;    /* task names, small headings */
  --lb-text-xl: 20px;    /* card titles */
  --lb-text-2xl: 24px;   /* 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: 240px;
  --lb-content-max: 1280px;
  --lb-measure: 72ch;        /* 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; }
}

:root { --lb-text-meta:13px; --lb-text-base:15px; --lb-topbar-h:64px; --lb-sidebar-compact:64px; --lb-preview-w:360px; --lb-preview-max:480px; --lb-editor-w:760px; --lb-action-clearance:112px; }

/* Light theme: form fields carry a 3:1 border against the milk-tea surfaces (WCAG 1.4.11); dividers keep --lb-border. */
:root[data-theme="light"] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea) { border-color: var(--lb-border-strong); }
/* Light theme: the authorization guide's step diagrams (inline SVG with fixed green fills) follow the brand palette.
   Instructional figures only; dark mode and every other SVG keep their own colours. */
:root[data-theme="light"] figure svg { background: var(--lb-surface); }
:root[data-theme="light"] figure svg [fill="#e1e9d9"] { fill: var(--lb-surface-muted); }
:root[data-theme="light"] figure svg [fill="#34553c"] { fill: var(--lb-primary); }
:root[data-theme="light"] figure svg [stroke="#34553c"] { stroke: var(--lb-primary); }
:root[data-theme="light"] figure svg [fill="#193822"] { fill: var(--lb-text); }
:root[data-theme="light"] .mobile-flow { background: var(--lb-surface-muted); color: var(--lb-text); }