/* SaaS Ryan Design System - CSS Variables */

:root {
  /* Primary Colors */
  --ryan-blue: #2563EB;
  --ryan-blue-hover: #1d4ed8;
  --ryan-blue-rgb: 37, 99, 235;
  --ryan-green: #059669;
  --ryan-green-hover: #047857;
  --ryan-green-rgb: 5, 150, 105;

  /* Neutral Colors */
  --ryan-dark: #1E293B;
  --ryan-dark-rgb: 30, 41, 59;
  --ryan-gray: #64748B;
  --ryan-gray-rgb: 100, 116, 139;
  --ryan-light: #F8FAFC;
  --ryan-light-rgb: 248, 250, 252;
  --ryan-border: #E2E8F0;
  --ryan-border-rgb: 226, 232, 240;

  /* Accent Colors */
  --ryan-warning: #F59E0B;
  --ryan-error: #DC2626;
  --ryan-info: #0EA5E9;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  /* Font Sizes */
  --text-h1: 2rem;        /* 32px */
  --text-h2: 1.5rem;      /* 24px */
  --text-h3: 1.25rem;     /* 20px */
  --text-h4: 1.125rem;    /* 18px */
  --text-body: 1rem;      /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-tiny: 0.75rem;   /* 12px */

  /* Spacing (8px base) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Layout */
  --max-width: 1200px;
  --navbar-height: 64px;
}

/* Utility Classes */
.btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}

.btn-primary {
  background: var(--ryan-blue);
  color: white;
}

.btn-primary:hover {
  background: var(--ryan-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-success {
  background: var(--ryan-green);
  color: white;
}

.btn-success:hover {
  background: var(--ryan-green-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: white;
  color: var(--ryan-blue);
  border: 1px solid var(--ryan-border);
}

.btn-secondary:hover {
  background: var(--ryan-light);
  border-color: var(--ryan-blue);
}

.card {
  background: white;
  border: 1px solid var(--ryan-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-tiny);
  font-weight: 600;
}

.badge-success {
  background: rgba(5, 150, 105, 0.1);
  color: var(--ryan-green);
}

.badge-info {
  background: rgba(37, 99, 235, 0.1);
  color: var(--ryan-blue);
}

/* Typography Utilities */
.h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--ryan-dark);
  line-height: 1.2;
}

.h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--ryan-dark);
  line-height: 1.3;
}

.body-text {
  font-size: var(--text-body);
  color: var(--ryan-gray);
  line-height: 1.6;
}

.small-text {
  font-size: var(--text-small);
  color: var(--ryan-gray);
}