/* Load order: tokens, base, shell, components, pages, responsive, themes. */
:root {
    color-scheme: light;

    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --ui-page-max: 1268px;
    --ui-reading-max: 1040px;
    --ui-page-gutter: 16px;
    --ui-mobile-gutter: 12px;
    --ui-mobile-header: 54px;

    --ui-primary: #d9364f;
    --ui-primary-hover: #c92f46;
    --ui-primary-active: #b9293e;
    --ui-primary-soft: #fff1f3;
    --ui-primary-border: #f2b7c0;
    --ui-on-primary: #ffffff;
    --ui-accent: #ff853f;
    --ui-accent-soft: #fff1e9;
    --ui-price: #d32f49;

    --ui-ink: #202633;
    --ui-heading: #252c39;
    --ui-muted: #687184;
    --ui-subtle: #687184;
    --ui-line: #e5e8ee;
    --ui-line-strong: #d8dde5;
    --ui-page: #f4f5f7;
    --ui-surface: #ffffff;
    --ui-surface-raised: #ffffff;
    --ui-surface-muted: #f5f6f8;
    --ui-surface-hover: #f0f2f5;
    --ui-surface-accent: #fffaf9;
    --ui-overlay: rgba(27, 32, 42, .56);
    --ui-nav-surface: rgba(255, 255, 255, .96);
    --ui-mobile-bar-surface: rgba(255, 255, 255, .97);

    --ui-success: #15845c;
    --ui-success-soft: #edf9f4;
    --ui-success-border: #a9dfca;
    --ui-danger: #c93d4e;
    --ui-danger-soft: #fff1f2;
    --ui-danger-border: #f4b4bd;
    --ui-warning: #b75021;
    --ui-warning-soft: #fff6ed;
    --ui-warning-border: #f5c79f;
    --ui-info: #2563a6;
    --ui-info-soft: #eef6ff;
    --ui-info-border: #b9d6f5;

    --ui-image-placeholder: #edf0f3;
    --ui-image-sheen: #f8fafc;
    --ui-skeleton: #e5e8ee;
    --ui-skeleton-highlight: #f7f8fa;
    --ui-banner-copy: rgba(32, 38, 51, .80);
    --ui-favorite-surface: rgba(255, 255, 255, .90);

    --ui-hero-surface: #29303e;
    --ui-hero-ink: #ffffff;
    --ui-hero-muted: rgba(255, 255, 255, .76);
    --ui-profile-surface: #29303e;
    --ui-profile-ink: #ffffff;
    --ui-profile-muted: rgba(255, 255, 255, .72);

    --ui-share-surface: #ffffff;
    --ui-share-ink: #202633;
    --ui-share-muted: #687184;
    --ui-share-line: #e5e8ee;

    --ui-radius-xs: 4px;
    --ui-radius-sm: 6px;
    --ui-radius-md: 8px;
    --ui-radius-lg: 12px;
    --ui-radius-round: 999px;
    --ui-control-sm: 34px;
    --ui-control-md: 40px;
    --ui-control-lg: 44px;
    --ui-touch-target: 44px;

    --ui-shadow-xs: 0 2px 8px rgba(31, 39, 55, .05);
    --ui-shadow-sm: 0 2px 10px rgba(31, 39, 55, .05);
    --ui-shadow-md: 0 6px 20px rgba(31, 39, 55, .08);
    --ui-shadow-lg: 0 24px 70px rgba(18, 23, 33, .24);
    --ui-focus: 0 0 0 3px rgba(233, 80, 107, .16);

    --ui-z-dropdown: 400;
    --ui-z-sticky: 700;
    --ui-z-nav: 800;
    --ui-z-mobile-bar: 900;
    --ui-z-backdrop: 1000;
    --ui-z-dialog: 1010;
    --ui-z-toast: 1100;
    --ui-z-tooltip: 1200;
    --ui-z-wechat: 1300;

    --ui-duration-fast: 150ms;
    --ui-duration: 220ms;
    --ui-ease-out: cubic-bezier(.22, 1, .36, 1);

    --brand: var(--ui-primary);
    --brand-2: var(--ui-accent);
    --ink: var(--ui-ink);
    --muted: var(--ui-muted);
    --line: var(--ui-line);
    --soft: var(--ui-surface-muted);
    --card: var(--ui-surface);
    --good: var(--ui-success);
    --bad: var(--ui-danger);
    --shadow: var(--ui-shadow-md);
    --page-bg: var(--ui-page);
    --focus-ring: rgba(233, 80, 107, .16);
}