/**
 * KODA Design System - Base Styles
 * Version: 1.0.0
 *
 * Variables CSS globales et composants de base
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ========================================================================== */

:root {
    /* Color Palette - Dark Academia */
    --koda-bg: #0a0a0a;
    --koda-bg-secondary: #12100e;
    --koda-bg-tertiary: #1a1714;
    --koda-panel: #12100e;
    --koda-card: #1a1714;

    /* Text Colors */
    --koda-text: #e8e4d9;
    --koda-text-secondary: #a89f8d;
    --koda-text-muted: #6b6357;

    /* Border Colors */
    --koda-border: #2d2a25;
    --koda-border-light: #3d3a35;

    /* Accent Colors - Gold */
    --koda-gold: #c9a227;
    --koda-gold-light: #e5c76b;
    --koda-gold-dark: #9a7b1a;

    /* Forest Palette */
    --forest-primary: #27ae60;
    --forest-secondary: #2ecc71;
    --forest-dark: #1e8449;
    --forest-glow: rgba(39, 174, 96, 0.3);

    /* Status Colors */
    --koda-success: #27ae60;
    --koda-warning: #f39c12;
    --koda-danger: #e74c3c;
    --koda-info: #3498db;

    /* Typography */
    --koda-font-display: 'Cinzel', 'Palatino Linotype', serif;
    --koda-font-body: 'Cormorant Garamond', Georgia, serif;
    --koda-font-ui: 'Lato', 'Helvetica Neue', sans-serif;

    /* Spacing Scale */
    --koda-space-xs: 0.25rem;
    --koda-space-sm: 0.5rem;
    --koda-space-md: 1rem;
    --koda-space-lg: 1.5rem;
    --koda-space-xl: 2rem;
    --koda-space-2xl: 3rem;

    /* Border Radius */
    --koda-radius-sm: 4px;
    --koda-radius-md: 8px;
    --koda-radius-lg: 12px;
    --koda-radius-xl: 20px;
    --koda-radius-full: 9999px;

    /* Shadows */
    --koda-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --koda-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --koda-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --koda-shadow-glow: 0 0 20px rgba(201, 162, 39, 0.3);

    /* Transitions */
    --koda-transition-fast: 150ms ease;
    --koda-transition-normal: 300ms ease;
    --koda-transition-slow: 500ms ease;
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

/* Notice Components */
.koda-notice {
    padding: var(--koda-space-md) var(--koda-space-lg);
    border-radius: var(--koda-radius-md);
    margin-bottom: var(--koda-space-md);
    border-left: 4px solid;
}

.koda-notice--info {
    background: rgba(52, 152, 219, 0.1);
    border-color: var(--koda-info);
    color: var(--koda-info);
}

.koda-notice--warning {
    background: rgba(243, 156, 18, 0.1);
    border-color: var(--koda-warning);
    color: var(--koda-warning);
}

.koda-notice--success {
    background: rgba(39, 174, 96, 0.1);
    border-color: var(--koda-success);
    color: var(--koda-success);
}

.koda-notice--error {
    background: rgba(231, 76, 60, 0.1);
    border-color: var(--koda-danger);
    color: var(--koda-danger);
}

/* Button Components */
.koda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--koda-space-sm);
    padding: var(--koda-space-sm) var(--koda-space-lg);
    font-family: var(--koda-font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--koda-radius-md);
    cursor: pointer;
    transition: all var(--koda-transition-fast);
}

.koda-btn--primary {
    background: linear-gradient(135deg, var(--koda-gold), var(--koda-gold-light));
    color: var(--koda-bg);
}

.koda-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--koda-shadow-glow);
}

.koda-btn--secondary {
    background: var(--koda-bg-tertiary);
    color: var(--koda-text);
    border: 1px solid var(--koda-border);
}

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

.koda-btn--outline {
    background: transparent;
    color: var(--koda-gold);
    border: 1px solid var(--koda-gold);
}

.koda-btn--outline:hover {
    background: rgba(201, 162, 39, 0.1);
}

.koda-btn--sm {
    padding: var(--koda-space-xs) var(--koda-space-md);
    font-size: 0.8rem;
}

.koda-btn--lg {
    padding: var(--koda-space-md) var(--koda-space-xl);
    font-size: 1rem;
}

/* Card Components */
.koda-card {
    background: var(--koda-card);
    border: 1px solid var(--koda-border);
    border-radius: var(--koda-radius-lg);
    padding: var(--koda-space-lg);
}

.koda-card--hover:hover {
    border-color: var(--koda-border-light);
    box-shadow: var(--koda-shadow-md);
}

/* Order Badge */
.koda-order-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--koda-space-xs);
    padding: var(--koda-space-xs) var(--koda-space-md);
    font-family: var(--koda-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    border-radius: var(--koda-radius-full);
    background: var(--order-color, var(--koda-gold));
}

.koda-order-badge--lupus {
    --order-color: #8B4513;
}

.koda-order-badge--ouroboros {
    --order-color: #2D5016;
}

.koda-order-badge--abyssae {
    --order-color: #0a1628;
}

.koda-order-badge--aeria {
    --order-color: #D4A520;
}

.koda-order-badge--tanae {
    --order-color: #8B7355;
}

.koda-order-badge--myrmex {
    --order-color: #4A4A4A;
}

/* ==========================================================================
   LEGACY DASHBOARD STYLES
   ========================================================================== */

.koda-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--koda-space-lg);
}

.koda-dashboard__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--koda-space-xl);
}

.koda-dashboard__header h2 {
    font-family: var(--koda-font-display);
    font-size: 1.5rem;
    margin: 0;
}

.koda-dashboard__order {
    display: flex;
    align-items: center;
}

.koda-dashboard__no-order {
    text-align: center;
    padding: var(--koda-space-xl);
}

.koda-dashboard__logout {
    margin-left: auto;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.koda-dashboard__logout:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.koda-dashboard__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--koda-space-md);
}

.koda-dashboard__link {
    display: flex;
    align-items: center;
    gap: var(--koda-space-md);
    padding: var(--koda-space-lg);
    background: var(--koda-card);
    border: 1px solid var(--koda-border);
    border-radius: var(--koda-radius-lg);
    text-decoration: none;
    color: var(--koda-text);
    transition: all var(--koda-transition-fast);
}

.koda-dashboard__link:hover {
    border-color: var(--koda-gold);
    transform: translateY(-2px);
    box-shadow: var(--koda-shadow-md);
}

.koda-dashboard__link .koda-icon {
    font-size: 1.5rem;
}

@media (max-width: 720px) {
    .koda-dashboard__logout {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.koda-text-center {
    text-align: center;
}

.koda-text-gold {
    color: var(--koda-gold);
}

.koda-text-muted {
    color: var(--koda-text-muted);
}

.koda-mt-sm { margin-top: var(--koda-space-sm); }
.koda-mt-md { margin-top: var(--koda-space-md); }
.koda-mt-lg { margin-top: var(--koda-space-lg); }
.koda-mb-sm { margin-bottom: var(--koda-space-sm); }
.koda-mb-md { margin-bottom: var(--koda-space-md); }
.koda-mb-lg { margin-bottom: var(--koda-space-lg); }

.koda-flex {
    display: flex;
}

.koda-flex-center {
    justify-content: center;
    align-items: center;
}

.koda-gap-sm { gap: var(--koda-space-sm); }
.koda-gap-md { gap: var(--koda-space-md); }
.koda-gap-lg { gap: var(--koda-space-lg); }

/* Homepage UX fix: hide WooCommerce mini-cart widget */
.widget_shopping_cart,
.woocommerce-mini-cart,
[class*="wc-block-mini-cart"] {
    display: none !important;
}