/*
 * Silk Road Finance design tokens
 * Source of truth: primitive -> semantic -> component.
 * Keep raw values in the primitive layer only.
 */

:root {
    /* Primitive: color */
    --ds-color-white: #ffffff;
    --ds-color-black: #000000;

    --ds-color-brand-50: #eef5ff;
    --ds-color-brand-100: #dbe9fd;
    --ds-color-brand-200: #cfdcff;
    --ds-color-brand-300: #8bb9fb;
    --ds-color-brand-400: #6f97ff;
    --ds-color-brand-500: #2878e8;
    --ds-color-brand-600: #2450ff;
    --ds-color-brand-700: #193ed4;
    --ds-color-brand-900: #113178;

    --ds-color-ink-900: #091221;
    --ds-color-ink-800: #17181a;
    --ds-color-ink-700: #263349;
    --ds-color-ink-600: #333333;
    --ds-color-ink-500: #667085;
    --ds-color-ink-400: #8a96a8;
    --ds-color-ink-300: #9da1aa;

    --ds-color-neutral-25: #f8faff;
    --ds-color-neutral-50: #f7f8fa;
    --ds-color-neutral-75: #f6f7fa;
    --ds-color-neutral-100: #eef2f8;
    --ds-color-neutral-150: #eef1f6;
    --ds-color-neutral-200: #e9eaed;
    --ds-color-neutral-250: #e1e3e7;
    --ds-color-neutral-300: #dde3ec;
    --ds-color-neutral-350: #dfe2e7;
    --ds-color-neutral-400: #cccccc;
    --ds-color-neutral-500: #999999;

    --ds-color-danger-500: #ec4c3d;
    --ds-color-danger-600: #cc392c;
    --ds-color-hot: #ff4d49;
    --ds-color-footer-800: #202124;

    /* Primitive: typography */
    --ds-font-family-system:
        system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', Arial, sans-serif;
    --ds-font-size-2xs: 11px;
    --ds-font-size-xs: 12px;
    --ds-font-size-sm: 13px;
    --ds-font-size-md: 14px;
    --ds-font-size-lg: 15px;
    --ds-font-size-xl: 16px;
    --ds-font-size-2xl: 18px;
    --ds-font-size-3xl: 20px;
    --ds-font-size-4xl: 24px;
    --ds-font-size-5xl: 28px;
    --ds-font-size-6xl: 36px;
    --ds-font-size-7xl: 44px;
    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold: 700;
    --ds-line-height-tight: 1.2;
    --ds-line-height-heading: 1.35;
    --ds-line-height-title: 1.45;
    --ds-line-height-body: 1.6;
    --ds-line-height-relaxed: 1.75;
    --ds-line-height-article: 1.9;

    /* Primitive: spacing, shape, elevation, motion */
    --ds-space-0: 0;
    --ds-space-1: 2px;
    --ds-space-2: 4px;
    --ds-space-3: 6px;
    --ds-space-4: 8px;
    --ds-space-5: 10px;
    --ds-space-6: 12px;
    --ds-space-7: 14px;
    --ds-space-8: 16px;
    --ds-space-9: 18px;
    --ds-space-10: 20px;
    --ds-space-11: 22px;
    --ds-space-12: 24px;
    --ds-space-14: 28px;
    --ds-space-16: 32px;
    --ds-space-18: 36px;
    --ds-space-20: 40px;
    --ds-space-24: 48px;
    --ds-space-32: 64px;

    --ds-radius-none: 0;
    --ds-radius-xs: 2px;
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius-full: 999px;

    --ds-border-width-default: 1px;
    --ds-border-width-strong: 2px;

    --ds-shadow-none: none;
    --ds-shadow-card: 0 4px 12px rgba(23, 41, 75, 0.05);
    --ds-shadow-menu: 0 8px 18px rgba(23, 41, 75, 0.09);
    --ds-shadow-raised: 0 12px 28px rgba(23, 41, 75, 0.1);
    --ds-shadow-overlay: 0 20px 52px rgba(23, 41, 75, 0.2), 0 6px 18px rgba(23, 41, 75, 0.1);

    --ds-duration-fast: 180ms;
    --ds-duration-normal: 200ms;
    --ds-duration-slow: 300ms;
    --ds-duration-image: 350ms;
    --ds-ease-standard: ease;
    --ds-ease-emphasized: ease-out;

    --ds-z-content: 1;
    --ds-z-sticky: 100;
    --ds-z-dropdown: 200;
    --ds-z-overlay: 1000;

    /* Semantic: surfaces and content */
    --color-surface-page: var(--ds-color-white);
    --color-surface-subtle: var(--ds-color-neutral-75);
    --color-surface-muted: var(--ds-color-neutral-100);
    --color-surface-raised: var(--ds-color-white);
    --color-surface-footer: var(--ds-color-footer-800);
    --color-surface-overlay: rgba(0, 0, 0, 0.5);

    --color-content-strong: var(--ds-color-ink-900);
    --color-content-default: var(--ds-color-ink-700);
    --color-content-muted: var(--ds-color-ink-500);
    --color-content-subtle: var(--ds-color-ink-400);
    --color-content-inverse: var(--ds-color-white);

    --color-action-primary: var(--ds-color-brand-600);
    --color-action-primary-hover: var(--ds-color-brand-700);
    --color-action-primary-soft: var(--ds-color-brand-50);
    --color-action-danger: var(--ds-color-danger-500);
    --color-action-danger-hover: var(--ds-color-danger-600);

    --color-border-subtle: var(--ds-color-neutral-150);
    --color-border-default: var(--ds-color-neutral-300);
    --color-border-control: var(--ds-color-neutral-250);
    --color-border-focus: var(--ds-color-brand-600);

    --font-family-body: var(--ds-font-family-system);
    --font-size-body: var(--ds-font-size-md);
    --font-size-caption: var(--ds-font-size-xs);
    --font-size-label: var(--ds-font-size-sm);
    --font-size-title-card: var(--ds-font-size-2xl);
    --font-size-title-section: var(--ds-font-size-5xl);
    --font-size-title-page: var(--ds-font-size-5xl);

    --space-page-inline: 15px;
    --space-page-inline-mobile: var(--ds-space-6);
    --space-component-gap: var(--ds-space-8);
    --space-section-gap: var(--ds-space-18);
    --layout-content-max: 1160px;
    --layout-reading-max: 760px;
    --layout-sidebar-width: 337px;

    --radius-tag: var(--ds-radius-sm);
    --radius-control: var(--ds-radius-md);
    --radius-card: var(--ds-radius-lg);
    --radius-pill: var(--ds-radius-full);
    --shadow-card: var(--ds-shadow-card);
    --shadow-menu: var(--ds-shadow-menu);
    --shadow-raised: var(--ds-shadow-raised);

    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: rgba(40, 120, 232, 0.45);
    --opacity-disabled: 0.4;
    --transition-interactive:
        color var(--ds-duration-normal) var(--ds-ease-standard),
        background-color var(--ds-duration-normal) var(--ds-ease-standard),
        border-color var(--ds-duration-normal) var(--ds-ease-standard),
        box-shadow var(--ds-duration-normal) var(--ds-ease-standard),
        transform var(--ds-duration-normal) var(--ds-ease-emphasized);

    /* Component: shared controls */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 44px;
    --button-bg: var(--color-action-primary);
    --button-bg-hover: var(--color-action-primary-hover);
    --button-fg: var(--color-content-inverse);
    --button-radius: var(--radius-control);
    --button-font-size: var(--font-size-body);
    --button-font-weight: var(--ds-font-weight-semibold);

    --input-height: 40px;
    --input-bg: var(--color-surface-raised);
    --input-fg: var(--color-content-default);
    --input-placeholder: var(--color-content-muted);
    --input-border: var(--color-border-control);
    --input-border-focus: var(--color-border-focus);
    --input-radius: var(--radius-control);
    --input-padding-inline: var(--ds-space-6);

    --card-bg: var(--color-surface-raised);
    --card-fg: var(--color-content-default);
    --card-border: var(--color-border-subtle);
    --card-border-hover: var(--color-border-default);
    --card-radius: var(--radius-card);
    --card-shadow: var(--shadow-card);
    --card-shadow-hover: var(--shadow-raised);

    --chip-bg: var(--color-surface-subtle);
    --chip-fg: var(--color-content-default);
    --chip-bg-hover: var(--color-action-primary);
    --chip-fg-hover: var(--color-content-inverse);
    --chip-radius: var(--radius-tag);

    --pagination-size: 32px;
    --pagination-bg: var(--color-surface-raised);
    --pagination-fg: var(--ds-color-ink-600);
    --pagination-border: var(--color-border-control);
    --pagination-active-bg: var(--color-action-primary);
    --pagination-active-fg: var(--color-content-inverse);

    --spinner-size: var(--ds-space-14);
    --spinner-border-width: var(--ds-border-width-strong);

    --header-height: 64px;
    --header-bg: rgba(255, 255, 255, 0.97);
    --header-border: var(--color-border-default);
    --header-z-index: var(--ds-z-sticky);
    --drawer-width: 280px;
    --drawer-overlay: var(--color-surface-overlay);

    --section-marker-width: 5px;
    --section-marker-height: 18px;
    --section-marker-color: var(--color-action-primary);

    /* Documented layout and responsive roles. */
    --layout-sidebar-topic-width: 300px;
    --layout-card-media-width: 240px;
    --layout-card-media-tablet: 160px;
    --layout-card-media-mobile: 110px;
    --layout-category-card-content-min-height: 228px;
    --layout-category-card-media-mobile: 128px;
    --layout-category-card-media-small: 112px;
    --layout-banner-min-height: 224px;
    --layout-banner-min-height-mobile: 156px;
    --layout-header-logo-width: 112px;
    --layout-header-logo-compact: 104px;
    --layout-header-logo-mobile: 96px;
    --font-size-title-hero: var(--ds-font-size-7xl);
    --font-size-title-banner: var(--ds-font-size-6xl);
    --font-size-title-banner-mobile: 26px;
    --font-size-title-page-mobile: 22px;
    --font-size-body-mobile: var(--ds-font-size-lg);
    --control-touch-target: var(--button-height-lg);

    /* Compatibility aliases used by existing components. */
    --cloud-blue-600: var(--ds-color-brand-600);
    --cloud-blue-700: var(--ds-color-brand-700);
    --cloud-ink-900: var(--ds-color-ink-900);
    --cloud-ink-700: var(--ds-color-ink-700);
    --cloud-ink-500: var(--ds-color-ink-500);
    --cloud-ink-400: var(--ds-color-ink-400);
    --cloud-line-100: var(--ds-color-neutral-150);
    --cloud-line-200: var(--ds-color-neutral-300);
    --cloud-fill-50: var(--ds-color-neutral-75);
    --cloud-fill-100: var(--ds-color-neutral-100);
    --cloud-white: var(--ds-color-white);
    --surface-page: var(--color-surface-page);
    --surface-subtle: var(--color-surface-subtle);
    --surface-raised: var(--color-surface-raised);
    --text-strong: var(--color-content-strong);
    --text-default: var(--color-content-default);
    --text-muted: var(--color-content-muted);
    --line-default: var(--color-border-default);
    --accent: var(--color-action-primary);
    --accent-hover: var(--color-action-primary-hover);
    --content-width: var(--layout-content-max);
    --section-gap: var(--space-section-gap);
    --font-family-sans: var(--font-family-body);

    --color-primary: var(--ds-color-brand-500);
    --color-primary-light: var(--ds-color-brand-400);
    --color-danger: var(--ds-color-danger-500);
    --color-danger-dark: var(--ds-color-danger-600);
    --color-footer-bg: var(--color-surface-footer);
    --color-text: var(--ds-color-ink-900);
    --color-text-secondary: var(--ds-color-ink-500);
    --color-text-muted: var(--ds-color-ink-300);
    --color-border: var(--ds-color-neutral-200);
    --color-bg-light: var(--ds-color-neutral-50);
    --color-bg-page: var(--color-surface-page);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration-fast: 0ms;
        --ds-duration-normal: 0ms;
        --ds-duration-slow: 0ms;
        --ds-duration-image: 0ms;
    }
}