@charset "UTF-8";

:root {
  /* Typography */
  --psx-font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --psx-font-display: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --psx-text-xs: 12px;
  --psx-text-sm: 14px;
  --psx-text-md: 16px;
  --psx-text-lg: 20px;
  --psx-text-xl: 28px;
  --psx-text-2xl: 36px;
  --psx-line-tight: 1.2;
  --psx-line-normal: 1.45;
  --psx-line-relaxed: 1.65;

  /* Spacing */
  --psx-space-1: 4px;
  --psx-space-2: 8px;
  --psx-space-3: 12px;
  --psx-space-4: 16px;
  --psx-space-5: 20px;
  --psx-space-6: 24px;
  --psx-space-7: 32px;
  --psx-space-8: 40px;
  --psx-space-9: 48px;

  /* Radius */
  --psx-radius-sm: 8px;
  --psx-radius-md: 12px;
  --psx-radius-lg: 16px;
  --psx-radius-xl: 20px;
  --psx-radius-pill: 999px;

  /* Colors */
  --psx-color-bg: #f4f4f5;
  --psx-color-surface: #ffffff;
  --psx-color-surface-soft: #fafafa;
  --psx-color-text: #171717;
  --psx-color-text-muted: #6b7280;
  --psx-color-border: #e5e7eb;
  --psx-color-border-strong: #d1d5db;
  --psx-color-accent: #ff6a00;
  --psx-color-accent-hover: #ea5f00;
  --psx-color-accent-soft: #fff1e7;
  --psx-color-success: #16a34a;
  --psx-color-success-soft: #eaf8ef;
  --psx-color-success-border: #b9e6c9;
  --psx-color-danger: #dc2626;
  --psx-color-danger-soft: #fff2f2;
  --psx-color-danger-border: #fecaca;
  --psx-color-warning: #d97706;
  --psx-color-warning-soft: #fff7ed;
  --psx-color-warning-border: #fed7aa;
  --psx-color-focus: rgba(255, 106, 0, 0.28);

  /* Elevation */
  --psx-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --psx-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.1);
}