/*
 * Standalone consumer facade for HLP Design System tokens.
 * Source: /Users/liujunliang/Projects/helipei/.design_library/hlp-design-system/colors_and_type.css
 * Keep page styles on the portable --color-*, --type-*, --space-* and --radius-* aliases.
 */
:root {
  --hlp-color-neutral-900: #0f172a;
  --hlp-color-neutral-700: #334155;
  --hlp-color-neutral-500: #64748b;
  --hlp-color-neutral-300: #cbd5e1;
  --hlp-color-neutral-50: #f1f5f9;
  --hlp-color-white: #ffffff;

  --hlp-color-primary-700: #1d4ed8;
  --hlp-color-primary-50: #eff6ff;
  --hlp-color-accent-green-600: #2ba245;
  --hlp-color-accent-green-50: #eef8f1;
  --hlp-color-semantic-warning: #f59e0b;
  --hlp-color-semantic-error: #dc2626;

  --hlp-color-text-primary: var(--hlp-color-neutral-900);
  --hlp-color-text-secondary: var(--hlp-color-neutral-700);
  --hlp-color-text-tertiary: var(--hlp-color-neutral-500);
  --hlp-color-text-inverse: var(--hlp-color-white);
  --hlp-color-bg-default: var(--hlp-color-white);
  --hlp-color-bg-secondary: var(--hlp-color-neutral-50);
  --hlp-color-surface-card: var(--hlp-color-white);
  --hlp-color-surface-info: var(--hlp-color-primary-50);
  --hlp-color-surface-success: var(--hlp-color-accent-green-50);
  --hlp-color-surface-warning: #fff7ed;
  --hlp-color-surface-error: #fef2f2;
  --hlp-color-border-default: var(--hlp-color-neutral-300);
  --hlp-color-action-primary: var(--hlp-color-primary-700);
  --hlp-color-action-consult: var(--hlp-color-accent-green-600);
  --hlp-color-state-success: var(--hlp-color-accent-green-600);
  --hlp-color-state-success-foreground: #15803d;
  --hlp-color-state-warning: var(--hlp-color-semantic-warning);
  --hlp-color-state-warning-foreground: #b45309;
  --hlp-color-state-error: var(--hlp-color-semantic-error);

  --hlp-font-family-cn: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --hlp-font-family-latin: "Inter", Arial, sans-serif;
  --hlp-type-display-size: 48px;
  --hlp-type-display-line-height: 1.2;
  --hlp-type-display-weight: 700;
  --hlp-type-headline-size: 32px;
  --hlp-type-headline-line-height: 1.3;
  --hlp-type-headline-weight: 700;
  --hlp-type-title-size: 24px;
  --hlp-type-title-line-height: 1.4;
  --hlp-type-title-weight: 600;
  --hlp-type-subtitle-size: 18px;
  --hlp-type-subtitle-line-height: 1.5;
  --hlp-type-subtitle-weight: 500;
  --hlp-type-body-size: 16px;
  --hlp-type-body-line-height: 1.6;
  --hlp-type-body-weight: 400;
  --hlp-type-body-sm-size: 14px;
  --hlp-type-body-sm-line-height: 1.5;
  --hlp-type-body-sm-weight: 400;
  --hlp-type-label-size: 14px;
  --hlp-type-label-line-height: 1.4;
  --hlp-type-label-weight: 600;
  --hlp-type-caption-size: 12px;
  --hlp-type-caption-line-height: 1.4;
  --hlp-type-caption-weight: 400;
  --hlp-type-metric-size: 40px;
  --hlp-type-metric-line-height: 1.1;
  --hlp-type-metric-weight: 700;

  --hlp-space-1: 4px;
  --hlp-space-2: 8px;
  --hlp-space-3: 12px;
  --hlp-space-4: 16px;
  --hlp-space-6: 24px;
  --hlp-space-8: 32px;
  --hlp-space-12: 48px;
  --hlp-space-16: 64px;
  --hlp-space-24: 96px;

  --hlp-radius-xs: 4px;
  --hlp-radius-sm: 6px;
  --hlp-radius-md: 8px;
  --hlp-radius-lg: 12px;
  --hlp-radius-xl: 16px;
  --hlp-radius-pill: 100px;
  --hlp-radius-full: 9999px;

  --hlp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --hlp-shadow-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --hlp-duration-fast: 150ms;
  --hlp-layout-landing-max: 1120px;
  --hlp-layout-reading-max: 800px;

  --color-text-primary: var(--hlp-color-text-primary);
  --color-text-secondary: var(--hlp-color-text-secondary);
  --color-text-tertiary: var(--hlp-color-text-tertiary);
  --color-text-inverse: var(--hlp-color-text-inverse);
  --color-bg-default: var(--hlp-color-bg-default);
  --color-bg-secondary: var(--hlp-color-bg-secondary);
  --color-surface-card: var(--hlp-color-surface-card);
  --color-surface-info: var(--hlp-color-surface-info);
  --color-surface-success: var(--hlp-color-surface-success);
  --color-surface-warning: var(--hlp-color-surface-warning);
  --color-surface-error: var(--hlp-color-surface-error);
  --color-border-default: var(--hlp-color-border-default);
  --color-action-primary: var(--hlp-color-action-primary);
  --color-action-consult: var(--hlp-color-action-consult);
  --color-state-success: var(--hlp-color-state-success);
  --color-state-success-foreground: var(--hlp-color-state-success-foreground);
  --color-state-warning: var(--hlp-color-state-warning);
  --color-state-warning-foreground: var(--hlp-color-state-warning-foreground);
  --color-state-error: var(--hlp-color-state-error);

  --font-family-cn: var(--hlp-font-family-cn);
  --font-family-latin: var(--hlp-font-family-latin);
  --type-display-size: var(--hlp-type-display-size);
  --type-display-line-height: var(--hlp-type-display-line-height);
  --type-display-weight: var(--hlp-type-display-weight);
  --type-headline-size: var(--hlp-type-headline-size);
  --type-headline-line-height: var(--hlp-type-headline-line-height);
  --type-headline-weight: var(--hlp-type-headline-weight);
  --type-title-size: var(--hlp-type-title-size);
  --type-title-line-height: var(--hlp-type-title-line-height);
  --type-title-weight: var(--hlp-type-title-weight);
  --type-subtitle-size: var(--hlp-type-subtitle-size);
  --type-subtitle-line-height: var(--hlp-type-subtitle-line-height);
  --type-subtitle-weight: var(--hlp-type-subtitle-weight);
  --type-body-size: var(--hlp-type-body-size);
  --type-body-line-height: var(--hlp-type-body-line-height);
  --type-body-weight: var(--hlp-type-body-weight);
  --type-body-sm-size: var(--hlp-type-body-sm-size);
  --type-body-sm-line-height: var(--hlp-type-body-sm-line-height);
  --type-body-sm-weight: var(--hlp-type-body-sm-weight);
  --type-label-size: var(--hlp-type-label-size);
  --type-label-line-height: var(--hlp-type-label-line-height);
  --type-label-weight: var(--hlp-type-label-weight);
  --type-caption-size: var(--hlp-type-caption-size);
  --type-caption-line-height: var(--hlp-type-caption-line-height);
  --type-caption-weight: var(--hlp-type-caption-weight);
  --type-metric-size: var(--hlp-type-metric-size);
  --type-metric-line-height: var(--hlp-type-metric-line-height);
  --type-metric-weight: var(--hlp-type-metric-weight);

  --space-1: var(--hlp-space-1);
  --space-2: var(--hlp-space-2);
  --space-3: var(--hlp-space-3);
  --space-4: var(--hlp-space-4);
  --space-6: var(--hlp-space-6);
  --space-8: var(--hlp-space-8);
  --space-12: var(--hlp-space-12);
  --space-16: var(--hlp-space-16);
  --space-24: var(--hlp-space-24);
  --radius-xs: var(--hlp-radius-xs);
  --radius-sm: var(--hlp-radius-sm);
  --radius-md: var(--hlp-radius-md);
  --radius-lg: var(--hlp-radius-lg);
  --radius-xl: var(--hlp-radius-xl);
  --radius-pill: var(--hlp-radius-pill);
  --radius-full: var(--hlp-radius-full);
  --shadow-sm: var(--hlp-shadow-sm);
  --shadow-hover: var(--hlp-shadow-hover);
  --duration-fast: var(--hlp-duration-fast);
  --layout-landing-max: var(--hlp-layout-landing-max);
  --layout-reading-max: var(--hlp-layout-reading-max);
}