/*
 * 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: #eef4ff;
  --ds-color-brand-100: #dce8ff;
  --ds-color-brand-200: #bdd4ff;
  --ds-color-brand-300: #8fb6ff;
  --ds-color-brand-400: #5c94ff;
  --ds-color-brand-500: #3f86ff;
  --ds-color-brand-600: #2978ff;
  --ds-color-brand-700: #1f63d9;
  --ds-color-brand-900: #1547a0;
  --ds-color-accent: #ea5514;

  --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-accent: var(--ds-color-accent);
  --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;
  }
}