/* 1588 design tokens: primitive values, semantic aliases, and component hooks. */
:root {
    /* Primitive palette */
    --1588-color-brand-navy: #102a43;
    --1588-color-brand-navy-deep: #071a2b;
    --1588-color-brand-blue: #1d5fa7;
    --1588-color-brand-red: #c93636;
    --1588-color-brand-red-deep: #a92727;
    --1588-color-brand-gold: #d8a63c;
    --1588-color-ball-red: #d94343;
    --1588-color-ball-blue: #3578c4;
    --1588-color-ball-green: #2f9b68;
    --1588-color-white: #ffffff;
    --1588-color-black: #111827;
    --1588-color-gray-50: #f8fafc;
    --1588-color-gray-100: #f1f5f9;
    --1588-color-gray-200: #e2e8f0;
    --1588-color-gray-300: #cbd5e1;
    --1588-color-gray-400: #94a3b8;
    --1588-color-gray-500: #64748b;
    --1588-color-gray-600: #475569;
    --1588-color-gray-700: #334155;
    --1588-color-gray-800: #1e293b;
    --1588-color-green-50: #ecfdf5;
    --1588-color-green-600: #168257;
    --1588-color-amber-50: #fffbeb;
    --1588-color-amber-600: #b7791f;
    --1588-color-red-50: #fff1f2;
    --1588-color-red-600: #c53030;
    --1588-color-blue-50: #eff6ff;
    --1588-color-blue-600: #2563eb;

    /* Primitive type, rhythm, shape, and elevation */
    --1588-font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    --1588-font-heading: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    --1588-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    --1588-font-size-xs: 12px;
    --1588-font-size-sm: 13px;
    --1588-font-size-md: 14px;
    --1588-font-size-lg: 16px;
    --1588-font-size-xl: 20px;
    --1588-font-size-2xl: 24px;
    --1588-line-height-tight: 1.25;
    --1588-line-height-body: 1.55;
    --1588-line-height-loose: 1.75;
    --1588-space-1: 4px;
    --1588-space-2: 8px;
    --1588-space-3: 12px;
    --1588-space-4: 16px;
    --1588-space-5: 20px;
    --1588-space-6: 24px;
    --1588-space-7: 32px;
    --1588-space-8: 40px;
    --1588-space-9: 48px;
    --1588-radius-sm: 4px;
    --1588-radius-md: 8px;
    --1588-radius-card: 10px;
    --1588-radius-pill: 999px;
    --1588-border-width: 1px;
    --1588-shadow-card: 0 2px 10px rgba(15, 42, 67, 0.08);
    --1588-shadow-float: 0 10px 28px rgba(15, 42, 67, 0.16);
    --1588-breakpoint-mobile: 767px;
    --1588-breakpoint-desktop: 992px;
}

:root {
    /* Semantic surface and content aliases */
    --1588-bg-page: var(--1588-color-gray-100);
    --1588-bg-subtle: var(--1588-color-gray-50);
    --1588-surface: var(--1588-color-white);
    --1588-surface-raised: var(--1588-color-white);
    --1588-text: var(--1588-color-gray-800);
    --1588-text-strong: var(--1588-color-brand-navy-deep);
    --1588-text-muted: var(--1588-color-gray-500);
    --1588-text-inverse: var(--1588-color-white);
    --1588-border: var(--1588-color-gray-200);
    --1588-border-strong: var(--1588-color-gray-300);
    --1588-focus-ring: rgba(37, 99, 235, 0.28);
    --1588-success: var(--1588-color-green-600);
    --1588-success-bg: var(--1588-color-green-50);
    --1588-warning: var(--1588-color-amber-600);
    --1588-warning-bg: var(--1588-color-amber-50);
    --1588-danger: var(--1588-color-red-600);
    --1588-danger-bg: var(--1588-color-red-50);
    --1588-info: var(--1588-color-blue-600);
    --1588-info-bg: var(--1588-color-blue-50);
    --1588-page-gutter: 24px;
    --1588-content-max-width: 1440px;
    --1588-control-height: 40px;
    --1588-header-height: 52px;
    --1588-sidebar-width: 184px;

    /* Component-level aliases */
    --1588-topbar-bg: var(--1588-color-brand-navy);
    --1588-topbar-border: rgba(255, 255, 255, 0.12);
    --1588-nav-link-color: rgba(255, 255, 255, 0.78);
    --1588-nav-link-active-bg: var(--1588-color-brand-red);
    --1588-card-padding: var(--1588-space-6);
    --1588-table-header-bg: var(--1588-color-gray-50);
    --1588-table-row-hover: var(--1588-color-blue-50);
    --1588-form-label-width: 112px;
    --1588-badge-height: 24px;
    --1588-lottery-accent: var(--1588-color-brand-red);
    --1588-admin-sidebar-bg: var(--1588-color-brand-navy-deep);
    --1588-admin-sidebar-active: var(--1588-color-brand-blue);
    --1588-admin-sidebar-link: rgba(255, 255, 255, 0.76);
    --1588-modal-backdrop: rgba(7, 26, 43, 0.6);
    --1588-shadow-mobile-nav: 0 -4px 16px rgba(15, 42, 67, 0.08);
    --1588-mobile-nav-height: 56px;
}

@media (max-width: 767px) {
    :root {
        --1588-page-gutter: 12px;
        --1588-card-padding: var(--1588-space-4);
        --1588-header-height: 48px;
        --1588-sidebar-width: 100%;
    }
}

@media (min-width: 992px) {
    :root {
        --1588-page-gutter: 24px;
        --1588-card-padding: var(--1588-space-6);
    }
}