/* Design System - Utility Classes */
/* Comprehensive utility classes using design tokens */

/* Typography Scale */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

/* Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-inverse { color: var(--color-text-inverse); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-hover { background-color: var(--color-surface-hover); }

/* Border Utilities */
.border { border: 1px solid var(--color-border); }
.border-primary { border-color: var(--color-primary); }
.border-success { border-color: var(--color-success); }
.border-error { border-color: var(--color-error); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Display Utilities */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* Responsive Utilities */
@media (max-width: var(--bp-tablet)) {
    .mobile-hidden { display: none; }
    .mobile-full { width: 100%; }
}

@media (min-width: calc(var(--bp-tablet) + 1px)) {
    .desktop-hidden { display: none; }
}

/* -----------------------------------------------------------------------------
 * Amivra Loading (single loading pattern)
 * -----------------------------------------------------------------------------
 * Use for in-page loading states. No overlay - use .loading-placeholder or
 * auth-check-overlay for full-screen loading.
 * Example: <div class="amivra-loading"><span class="amivra-loading__spinner"></span><p>Loading...</p></div>
 */
.amivra-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}
.amivra-loading__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-neutral);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: amivra-spin 1s linear infinite;
}
.amivra-loading__sub {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
@keyframes amivra-spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
 * Amivra Card (base card component)
 * -----------------------------------------------------------------------------
 * Use for summary cards, dashboard cards, action cards. Variants:
 *   .amivra-card                    - default
 *   .amivra-card--compact           - less padding
 *   .amivra-card--highlight        - primary border-left accent
 *
 * Example:
 *   <div class="amivra-card">...</div>
 *   <div class="amivra-card amivra-card--highlight">...</div>
 */
.amivra-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.amivra-card:hover {
    box-shadow: var(--shadow-lg);
}
.amivra-card--compact {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}
.amivra-card--highlight {
    border-left: 5px solid var(--color-primary);
}

/* -----------------------------------------------------------------------------
 * Amivra Banner (global, consistent title blocks)
 * -----------------------------------------------------------------------------
 * Use:
 *   <div class="amivra-banner">
 *     <h2 class="amivra-banner__title">Title</h2>
 *     <p class="amivra-banner__subtitle">Subtitle</p>
 *   </div>
 *
 * Banner text is forced to white for contrast on the primary gradient (WCAG AA).
 */
/* Banner: text uses --color-text-inverse for WCAG AA contrast on primary gradient */
.amivra-banner {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-surface);
}

.amivra-banner,
.amivra-banner * {
    color: var(--color-text-inverse) !important;
}

.amivra-banner__title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.02em;
    text-shadow: var(--shadow-sm);
}

.amivra-banner__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    opacity: 0.98;
    text-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------------------------
 * Amivra Tab Hero (Decision Dashboard style)
 * -----------------------------------------------------------------------------
 * Use at the top of each tab:
 *   <div class="amivra-tab-hero">
 *     <div class="amivra-tab-hero__titleRow">
 *       <span class="amivra-tab-hero__icon" aria-hidden="true">🎯</span>
 *       <h1 class="amivra-tab-hero__title">Decision Dashboard</h1>
 *     </div>
 *     <p class="amivra-tab-hero__subtitle">Short description</p>
 *   </div>
 *
 * Tab hero uses dark text on white for readability.
 */
.amivra-tab-hero {
    margin: 0 0 var(--spacing-lg) 0;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.amivra-tab-hero,
.amivra-tab-hero * {
    color: var(--color-text-primary) !important;
}

.amivra-tab-hero__titleRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin: 0 0 var(--spacing-sm) 0;
}

.amivra-tab-hero__icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
}

.amivra-tab-hero__title {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.02em;
}

.amivra-tab-hero__subtitle {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-secondary) !important;
}

@media (max-width: var(--bp-tablet)) {
    .amivra-tab-hero {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .amivra-tab-hero__title {
        font-size: var(--font-size-2xl);
    }

    .amivra-tab-hero__subtitle {
        font-size: var(--font-size-base);
    }
}