/**
 * Custom CSS Utility Classes
 *
 * This file defines custom utility classes that apply consistent styling.
 * Since we're using Tailwind via CDN, we use the 'class' approach in HTML.
 *
 * Note: To use these styles, add BOTH the custom class AND the Tailwind classes
 * in your HTML. For example: <div class="card rounded-lg shadow-lg">
 *
 * Or, you can use these standalone CSS classes that replicate Tailwind's styling.
 */

/* ===================================
   Border Radius Utilities
   =================================== */

/**
 * .rounded-default - Default rounded corners (8px)
 * Use this for consistent rounded corners across cards and containers
 */
.rounded-default {
  border-radius: 0.5rem; /* 8px - equivalent to Tailwind's rounded-lg */
}

/**
 * .rounded-card - Standard card rounded corners
 */
.rounded-card {
  border-radius: 0.5rem; /* 8px */
}

/**
 * .rounded-card-sm - Small card rounded corners
 */
.rounded-card-sm {
  border-radius: 0.25rem; /* 4px */
}

/**
 * .rounded-card-xl - Large card rounded corners
 */
.rounded-card-xl {
  border-radius: 0.75rem; /* 12px */
}


/* ===================================
   Card Component Base
   =================================== */

/**
 * .card-base - Base card styling
 * Use with Tailwind utilities: <div class="card-base bg-white shadow-lg border border-gray-200 p-6">
 */
.card-base {
  border-radius: 0.5rem; /* rounded-lg equivalent */
}


/* ===================================
   Alternative: Complete Standalone Classes
   (These don't require Tailwind classes)
   =================================== */

/**
 * .soab-card - Complete standalone card styling
 * No Tailwind classes needed when using this
 */
.soab-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
}

/**
 * .soab-btn - Complete standalone button styling
 */
.soab-btn {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

/**
 * .soab-btn-primary - Primary button (blue)
 */
.soab-btn-primary {
  background-color: #2563eb;
  color: white;
}

.soab-btn-primary:hover {
  background-color: #1d4ed8;
}

/**
 * .soab-input - Complete standalone input styling
 */
.soab-input {
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.soab-input:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
  border-color: #3b82f6;
}


/* ===================================
   Shadow Utilities
   =================================== */

/**
 * .shadow-default - Default shadow for cards and elevated elements
 * Equivalent to Tailwind's shadow-lg
 */
.shadow-default {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/**
 * .shadow-card - Card shadow (same as default)
 */
.shadow-card {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/**
 * .shadow-sm - Small shadow for subtle elevation
 * Equivalent to Tailwind's shadow-sm
 */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/**
 * .shadow-md - Medium shadow
 * Equivalent to Tailwind's shadow-md
 */
.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}


/* ===================================
   Font Utilities
   =================================== */

/**
 * .font-default - Default font weight (400 - normal)
 */
.font-default {
  font-weight: 400;
}

/**
 * .font-medium - Medium font weight (500)
 * Use for emphasis without being too bold
 */
.font-medium {
  font-weight: 500;
}

/**
 * .font-semibold - Semi-bold font weight (600)
 * Use for headings and important text
 */
.font-semibold {
  font-weight: 600;
}

/**
 * .font-bold - Bold font weight (700)
 * Use for strong emphasis
 */
.font-bold {
  font-weight: 700;
}

/**
 * .text-sm - Small text (14px)
 */
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/**
 * .text-base - Base text size (16px)
 */
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

/**
 * .text-lg - Large text (18px)
 */
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/**
 * .text-xl - Extra large text (20px)
 */
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

/**
 * .text-2xl - 2x large text (24px)
 */
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/**
 * .text-3xl - 3x large text (30px)
 */
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}


/* ===================================
   Text Color Utilities
   =================================== */

/**
 * .text-default - Default text color (dark grey for body text)
 * Equivalent to Tailwind's text-gray-700
 */
.text-default {
  color: #374151;
}

/**
 * .text-heading - Heading text color (darker grey, still not black)
 * Equivalent to Tailwind's text-gray-900
 */
.text-heading {
  color: #111827;
}

/**
 * .text-muted - Muted text color (lighter grey for secondary text)
 * Equivalent to Tailwind's text-gray-600
 */
.text-muted {
  color: #4b5563;
}


/* ===================================
   Border Utilities
   =================================== */

/**
 * .border-default - Default border for form inputs
 * Equivalent to Tailwind's border-gray-200
 */
.border-default {
  border: 1px solid #e5e7eb;
}