/**
 * PolicyEngine Design Tokens — CSS Custom Properties
 * Generated from @policyengine/design-system
 * Source of truth: packages/design-system/src/tokens/
 *
 * Usage:
 *   <link rel="stylesheet" href="https://unpkg.com/@policyengine/design-system/dist/tokens.css">
 *   or: @import '@policyengine/design-system/tokens.css';
 *   or: npm install @policyengine/design-system && import '@policyengine/design-system/dist/tokens.css';
 */
:root {
  /* Colors — primary (teal) */
  --pe-color-primary-50: #E6FFFA;
  --pe-color-primary-100: #B2F5EA;
  --pe-color-primary-200: #81E6D9;
  --pe-color-primary-300: #4FD1C5;
  --pe-color-primary-400: #38B2AC;
  --pe-color-primary-500: #319795;
  --pe-color-primary-600: #2C7A7B;
  --pe-color-primary-700: #285E61;
  --pe-color-primary-800: #234E52;
  --pe-color-primary-900: #1D4044;
  --pe-color-primary-alpha-40: #31979566;
  --pe-color-primary-alpha-50: #31979580;
  --pe-color-primary-alpha-60: #31979599;

  /* Colors — gray */
  --pe-color-gray-50: #F9FAFB;
  --pe-color-gray-100: #F2F4F7;
  --pe-color-gray-200: #E2E8F0;
  --pe-color-gray-300: #D1D5DB;
  --pe-color-gray-400: #9CA3AF;
  --pe-color-gray-500: #6B7280;
  --pe-color-gray-600: #4B5563;
  --pe-color-gray-700: #344054;
  --pe-color-gray-800: #1F2937;
  --pe-color-gray-900: #101828;

  /* Colors — blue */
  --pe-color-blue-50: #F0F9FF;
  --pe-color-blue-100: #E0F2FE;
  --pe-color-blue-200: #BAE6FD;
  --pe-color-blue-300: #7DD3FC;
  --pe-color-blue-400: #38BDF8;
  --pe-color-blue-500: #0EA5E9;
  --pe-color-blue-600: #0284C7;
  --pe-color-blue-700: #026AA2;
  --pe-color-blue-800: #075985;
  --pe-color-blue-900: #0C4A6E;

  /* Colors — semantic */
  --pe-color-success: #22C55E;
  --pe-color-warning: #FEC601;
  --pe-color-error: #EF4444;
  --pe-color-info: #1890FF;

  /* Colors — background */
  --pe-color-bg-primary: #FFFFFF;
  --pe-color-bg-secondary: #F5F9FF;
  --pe-color-bg-tertiary: #F1F5F9;
  --pe-color-bg-sider: #FFFFFF;

  /* Colors — text */
  --pe-color-text-primary: #000000;
  --pe-color-text-secondary: #5A5A5A;
  --pe-color-text-tertiary: #9CA3AF;
  --pe-color-text-inverse: #FFFFFF;
  --pe-color-text-title: #000000;
  --pe-color-text-warning: #d9480f;

  /* Colors — border */
  --pe-color-border-light: #E2E8F0;
  --pe-color-border-medium: #CBD5E1;
  --pe-color-border-dark: #94A3B8;

  /* Typography — font families */
  --pe-font-family-primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pe-font-family-secondary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pe-font-family-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pe-font-family-chart: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pe-font-family-prose: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pe-font-family-mono: JetBrains Mono, "Fira Code", Consolas, monospace;

  /* Typography — font sizes */
  --pe-font-size-xs: 12px;
  --pe-font-size-sm: 14px;
  --pe-font-size-base: 16px;
  --pe-font-size-lg: 18px;
  --pe-font-size-xl: 20px;
  --pe-font-size-2xl: 24px;
  --pe-font-size-3xl: 28px;
  --pe-font-size-4xl: 32px;

  /* Typography — font weights */
  --pe-font-weight-thin: 100;
  --pe-font-weight-light: 300;
  --pe-font-weight-normal: 400;
  --pe-font-weight-medium: 500;
  --pe-font-weight-semibold: 600;
  --pe-font-weight-bold: 700;
  --pe-font-weight-extrabold: 800;
  --pe-font-weight-black: 900;

  /* Typography — line heights */
  --pe-line-height-20: 20px;
  --pe-line-height-22: 22px;
  --pe-line-height-24: 24px;
  --pe-line-height-none: 1;
  --pe-line-height-tight: 1.25;
  --pe-line-height-snug: 1.375;
  --pe-line-height-normal: 1.5;
  --pe-line-height-relaxed: 1.625;
  --pe-line-height-loose: 2;

  /* Spacing — base scale */
  --pe-space-xs: 4px;
  --pe-space-sm: 8px;
  --pe-space-md: 12px;
  --pe-space-lg: 16px;
  --pe-space-xl: 20px;
  --pe-space-2xl: 24px;
  --pe-space-3xl: 32px;
  --pe-space-4xl: 48px;
  --pe-space-5xl: 64px;

  /* Spacing — border radius */
  --pe-radius-none: 0px;
  --pe-radius-chip: 2px;
  --pe-radius-element: 4px;
  --pe-radius-container: 8px;
  --pe-radius-feature: 12px;
}
