/* ============================================================
   AILA Design System — Giada Theme
   Card component tokens
   ------------------------------------------------------------
   A card is a flexible surface container. The component itself
   only defines the shell (surface, border-radius, shadow, padding);
   internal content is composed freely.
   ============================================================ */

:root {
  /* Shell */
  --aila-card-bg:            var(--background);
  --aila-card-border:        none;
  --aila-card-border-radius: var(--rounded-5);
  --aila-card-shadow:        var(--shadow-sm);

  /* Padding options */
  --aila-card-padding-3:       var(--spacing-3);
  --aila-card-padding-4:       var(--spacing-4);
  --aila-card-padding-5:       var(--spacing-5);
  /* Mix: top/right/bottom = spacing-3, left = spacing-4 */
  --aila-card-padding-mix-4-3: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
}

/* ============================================================
   Card element
   ------------------------------------------------------------
   Usage:
     <div class="card" data-padding="4">…</div>

   data-padding: 3 | 4 (default) | 5 | mix-4-3
   ============================================================ */

.card {
  background: var(--aila-card-bg);
  border: var(--aila-card-border);
  border-radius: var(--aila-card-border-radius);
  box-shadow: var(--aila-card-shadow);
  padding: var(--aila-card-padding-4);
}

.card[data-padding="3"]       { padding: var(--aila-card-padding-3); }
.card[data-padding="4"]       { padding: var(--aila-card-padding-4); }
.card[data-padding="5"]       { padding: var(--aila-card-padding-5); }
.card[data-padding="mix-4-3"] { padding: var(--aila-card-padding-mix-4-3); }