/**
 * Design System CSS Variables
 * Auto-generated from design-system/design-system.json
 * Version: 2.0.0
 * Generated: 2025-11-03T00:37:25.304Z
 */

:root {
  /* Colors */
  --color-primary: #4a5568;
  --color-secondary: #718096;
  --color-text: #2d3748;
  --color-text-light: #a0aec0;
  --color-background: #fafbfc;
  --color-white: #ffffff;
  --color-border: #e8ebef;
  --color-hover: #f1f5f9;

  /* Fonts */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-small: 13px;
  --font-size-medium: 15px;
  --font-size-large: 17px;
  --font-size-xlarge: 20px;
  --font-size-xxlarge: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-small: 12px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Border Radius */
  --border-radius-small: 6px;
  --border-radius-medium: 8px;

  /* Shadows */
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* Gradients */
  --gradient-primary: linear-gradient(180deg, #4a5568 0%, #718096 100%);

  /* Breakpoints */
  --breakpoint-mobile: 600px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.25s ease;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-hover);
  min-height: 100vh;
}

/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-light { color: var(--color-text-light); }
.bg-primary { background: var(--color-primary); }
.bg-secondary { background: var(--color-secondary); }
.bg-white { background: var(--color-white); }
.bg-gradient { background: var(--gradient-primary); }

.font-small { font-size: var(--font-size-small); }
.font-medium { font-size: var(--font-size-medium); }
.font-large { font-size: var(--font-size-large); }
.font-xlarge { font-size: var(--font-size-xlarge); }
.font-xxlarge { font-size: var(--font-size-xxlarge); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium-weight { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.p-xs { padding: var(--spacing-xs); }
.p-small { padding: var(--spacing-small); }
.p-medium { padding: var(--spacing-medium); }
.p-large { padding: var(--spacing-large); }
.p-xl { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }

.m-xs { margin: var(--spacing-xs); }
.m-small { margin: var(--spacing-small); }
.m-medium { margin: var(--spacing-medium); }
.m-large { margin: var(--spacing-large); }
.m-xl { margin: var(--spacing-xl); }
.m-xxl { margin: var(--spacing-xxl); }

.rounded-small { border-radius: var(--border-radius-small); }
.rounded-medium { border-radius: var(--border-radius-medium); }

.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }

.transition-fast { transition: var(--transition-fast); }
.transition-medium { transition: var(--transition-medium); }