/* Frontend Design Pro - Global Design Tokens */
:root {
  /* Colors (OKLCH) */
  --primary: oklch(0.55 0.2 250);
  --primary-hover: oklch(0.50 0.22 250);
  --success: oklch(0.65 0.15 145);
  --warning: oklch(0.75 0.18 75);
  --danger: oklch(0.60 0.20 25);
  --info: oklch(0.60 0.15 220);
  
  /* Neutrals */
  --bg: oklch(0.98 0.01 90);
  --surface: oklch(1 0 0);
  --text-primary: oklch(0.15 0.02 90);
  --text-secondary: oklch(0.45 0.02 90);
  --border: oklch(0.90 0.01 90);
  
  /* Spacing (8px base) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  
  /* Typography */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Consolas', monospace;
  
  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  
  /* Radius */
  --radius: 0.75rem;    /* 12px */
  --radius-sm: 0.5rem;  /* 8px */
  --radius-full: 9999px;
}

/* Global Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reusable Components */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-2);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  transition: transform var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 16px -4px rgba(0,0,0,0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-expo);
}
.btn:hover { background: var(--primary-hover); }
.btn-secondary {
  background: var(--border);
  color: var(--text-primary);
}
.btn-secondary:hover { background: oklch(0.85 0.01 90); }

.section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
}

.muted { color: var(--text-secondary); }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: oklch(0.95 0.01 90);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}