/**
 * 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.
 */

/* ===================================
   Base Typography
   =================================== */

body {
  font-family: "Nunito", system-ui, sans-serif;
}


/* ===================================
   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 #d9dbe3;
  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: #00c7b2; /* soab-groen */
  color: #1f145d; /* soab-paars */
}

.soab-btn-primary:hover {
  background-color: #cdeeea; /* soab-groen-soft */
}

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

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


/* ===================================
   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: #3b3b3d;
}

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

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

/**
 * .text-body - Body text color (same as text-default)
 */
.text-body {
  color: #3b3b3d;
}


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

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


/* ===================================
   Type Styles (SOAB design system)
   =================================== */

.type-page-title { font-size: 36px; line-height: 42px; font-weight: 900; color: #1f145d; }
.type-heading { font-size: 28px; line-height: 34px; font-weight: 900; color: #1f145d; }
.type-subheading { font-size: 22px; line-height: 28px; font-weight: 700; color: #1f145d; }
.type-card-title { font-size: 18px; line-height: 24px; font-weight: 800; color: #1f145d; }
.type-body { font-size: 15px; line-height: 22px; font-weight: 400; color: #3b3b3d; }
.type-label { font-size: 14px; line-height: 20px; font-weight: 700; color: #1f145d; }
.type-meta { font-size: 14px; line-height: 20px; font-weight: 600; color: #1f145d; }
.type-button { font-size: 16px; line-height: 20px; font-weight: 800; }
.type-chip { font-size: 12px; line-height: 16px; font-weight: 800; }

@media (max-width: 639px) {
  .type-page-title { font-size: 28px; line-height: 34px; }
  .type-heading { font-size: 22px; line-height: 28px; }
}