/**
 * Zeawin Design Tokens CSS
 *
 * CSS custom properties and utility classes based on design token system
 * Minimalist black color scheme matching Goya My Account design
 *
 * @package Goya_Child
 * @subpackage Design_Tokens
 * @version 2.2.0
 */

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Primary Brand Colors - Minimalist Black Theme */
    --zeawin-color-primary: #282828;  /* Goya's primary text/heading color */
    --zeawin-color-primary-dark: #1a1a1a;  /* Darker variant */
    --zeawin-color-primary-light: #f8f9fa;  /* Light background variant */

    /* Goya-specific color tokens - minimal design */
    --zeawin-color-accent: #282828;  /* Primary accent - black/dark gray */
    --zeawin-color-text-heading: #282828;  /* Goya's heading color */
    --zeawin-color-text-body: #212529;  /* Goya's body text color */
    --zeawin-color-border: #dee2e6;  /* Goya's border color */

    /* Neutral Colors */
    --zeawin-color-white: #ffffff;
    --zeawin-color-black: #000000;
    --zeawin-color-gray-100: #f8f9fa;
    --zeawin-color-gray-200: #e9ecef;
    --zeawin-color-gray-300: #dee2e6;
    --zeawin-color-gray-400: #ced4da;
    --zeawin-color-gray-500: #adb5bd;
    --zeawin-color-gray-600: #6c757d;
    --zeawin-color-gray-700: #495057;
    --zeawin-color-gray-800: #343a40;
    --zeawin-color-gray-900: #212529;

    /* Text Colors - Minimalist palette */
    --zeawin-color-text-primary: #333333;
    --zeawin-color-text-secondary: #6c757d;
    --zeawin-color-text-muted: #999999;
    --zeawin-color-text-light: #cccccc;
    --zeawin-color-text-white: #ffffff;

    /* Status Colors - Minimalist palette for badges/indicators */
    --zeawin-color-pending: #ffc107;
    --zeawin-color-pending-bg: #fff8e1;
    --zeawin-color-approved: #28a745;
    --zeawin-color-approved-bg: #e8f5e9;
    --zeawin-color-active: #17a2b8;
    --zeawin-color-active-bg: #e1f5fe;
    --zeawin-color-declined: #dc3545;
    --zeawin-color-declined-bg: #ffebee;

    /* Legacy status color support */
    --zeawin-color-success-bg: #e8f5e9;
    --zeawin-color-success-text: #1b5e20;
    --zeawin-color-success-border: #28a745;

    --zeawin-color-warning-bg: #fff9e6;
    --zeawin-color-warning-text: #856404;
    --zeawin-color-warning-border: #ffc107;

    --zeawin-color-info-bg: #e1f5fe;
    --zeawin-color-info-text: #01579b;
    --zeawin-color-info-border: #17a2b8;

    --zeawin-color-danger-bg: #ffebee;
    --zeawin-color-danger-text: #c62828;
    --zeawin-color-danger-border: #dc3545;

    /* Typography - Goya system fonts */
    --zeawin-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --zeawin-font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Font sizes - minimal range */
    --zeawin-font-size-xs: 0.75rem;     /* 12px */
    --zeawin-font-size-sm: 0.875rem;    /* 14px */
    --zeawin-font-size-base: 1rem;      /* 16px */
    --zeawin-font-size-lg: 1.125rem;    /* 18px */
    --zeawin-font-size-xl: 1.25rem;     /* 20px */
    --zeawin-font-size-2xl: 1.5rem;     /* 24px */
    --zeawin-font-size-3xl: 1.75rem;    /* 28px */
    --zeawin-font-size-4xl: 2rem;       /* 32px */

    /* Font weights - minimal range */
    --zeawin-font-weight-normal: 400;    /* Goya's standard weight */
    --zeawin-font-weight-medium: 500;
    --zeawin-font-weight-semibold: 600;
    --zeawin-font-weight-bold: 700;

    /* Line heights - Goya standard */
    --zeawin-line-height-normal: 1.5;
    --zeawin-line-height-relaxed: 1.7;
    --zeawin-line-height-goya: 1.7;     /* Goya's standard line height */

    /* Spacing (4px base unit) */
    --zeawin-spacing-1: 0.25rem;  /* 4px */
    --zeawin-spacing-2: 0.5rem;   /* 8px */
    --zeawin-spacing-3: 0.75rem;  /* 12px */
    --zeawin-spacing-4: 1rem;     /* 16px */
    --zeawin-spacing-5: 1.25rem;  /* 20px */
    --zeawin-spacing-6: 1.5rem;   /* 24px */
    --zeawin-spacing-8: 2rem;     /* 32px */
    --zeawin-spacing-10: 2.5rem;  /* 40px */

    /* Spacing refinements */
    --zeawin-spacing-section: var(--zeawin-spacing-8, 32px);
    --zeawin-spacing-component: var(--zeawin-spacing-5, 20px);

    /* Border Radius - Minimal (Goya uses sharp corners) */
    --zeawin-radius-sm: 0;        /* 0px - sharp corners */
    --zeawin-radius-base: 0;      /* 0px - sharp corners */
    --zeawin-radius-md: 0;        /* 0px - sharp corners */
    --zeawin-radius-lg: 0;        /* 0px - sharp corners */
    --zeawin-radius-xl: 0;        /* 0px - sharp corners */
    --zeawin-radius-full: 9999px;  /* Pill shape for badges */

    /* Shadows - Minimal (Goya uses subtle shadows sparingly) */
    --zeawin-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --zeawin-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --zeawin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --zeawin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --zeawin-shadow-brand: 0 2px 15px rgba(40, 40, 40, 0.08);
    --zeawin-shadow-brand-hover: 0 4px 20px rgba(40, 40, 40, 0.15);

    /* Transitions - Goya timing function */
    --zeawin-transition-fast: 150ms ease-in-out;
    --zeawin-transition-base: 200ms ease-in-out;
    --zeawin-transition-slow: 300ms ease-in-out;
    --zeawin-transition-goya: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Goya's standard transition */
    --zeawin-transition-interaction: 0.2s ease-out;
    --zeawin-transition-duration: 200ms;

    /* Focus states for accessibility */
    --zeawin-focus-ring: 0 0 0 3px rgba(40, 40, 40, 0.3);
    --zeawin-focus-ring-offset: 2px;

    /* Layout */
    --zeawin-layout-max-width: 1200px;
    --zeawin-layout-container-padding: 20px;
    --zeawin-layout-container-padding-mobile: 15px;
    --zeawin-layout-dashboard-max-width: 100%;
    --zeawin-layout-section-gap: 40px;
}

/* Utility Classes - Backgrounds */
.zeawin-bg-primary { background-color: var(--zeawin-color-primary); }
.zeawin-bg-primary-light { background-color: var(--zeawin-color-primary-light); }
.zeawin-bg-white { background-color: var(--zeawin-color-white); }
.zeawin-bg-gray-100 { background-color: var(--zeawin-color-gray-100); }
.zeawin-bg-gray-200 { background-color: var(--zeawin-color-gray-200); }

/* Utility Classes - Text Colors */
.zeawin-text-primary { color: var(--zeawin-color-text-primary); }
.zeawin-text-secondary { color: var(--zeawin-color-text-secondary); }
.zeawin-text-muted { color: var(--zeawin-color-text-muted); }
.zeawin-text-white { color: var(--zeawin-color-text-white); }
.zeawin-text-brand { color: var(--zeawin-color-primary); }

/* Utility Classes - Typography */
.zeawin-font-base { font-family: var(--zeawin-font-family-base); }
.zeawin-font-heading { font-family: var(--zeawin-font-family-heading); }

.zeawin-text-xs { font-size: var(--zeawin-font-size-xs); }
.zeawin-text-sm { font-size: var(--zeawin-font-size-sm); }
.zeawin-text-base { font-size: var(--zeawin-font-size-base); }
.zeawin-text-lg { font-size: var(--zeawin-font-size-lg); }
.zeawin-text-xl { font-size: var(--zeawin-font-size-xl); }
.zeawin-text-2xl { font-size: var(--zeawin-font-size-2xl); }
.zeawin-text-3xl { font-size: var(--zeawin-font-size-3xl); }

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

/* Utility Classes - Spacing */
.zeawin-p-1 { padding: var(--zeawin-spacing-1); }
.zeawin-p-2 { padding: var(--zeawin-spacing-2); }
.zeawin-p-3 { padding: var(--zeawin-spacing-3); }
.zeawin-p-4 { padding: var(--zeawin-spacing-4); }
.zeawin-p-5 { padding: var(--zeawin-spacing-5); }
.zeawin-p-6 { padding: var(--zeawin-spacing-6); }

.zeawin-m-1 { margin: var(--zeawin-spacing-1); }
.zeawin-m-2 { margin: var(--zeawin-spacing-2); }
.zeawin-m-3 { margin: var(--zeawin-spacing-3); }
.zeawin-m-4 { margin: var(--zeawin-spacing-4); }
.zeawin-m-5 { margin: var(--zeawin-spacing-5); }

/* Utility Classes - Border Radius */
.zeawin-rounded-sm { border-radius: var(--zeawin-radius-sm); }
.zeawin-rounded-base { border-radius: var(--zeawin-radius-base); }
.zeawin-rounded-md { border-radius: var(--zeawin-radius-md); }
.zeawin-rounded-lg { border-radius: var(--zeawin-radius-lg); }
.zeawin-rounded-xl { border-radius: var(--zeawin-radius-xl); }
.zeawin-rounded-full { border-radius: var(--zeawin-radius-full); }

/* Utility Classes - Shadows */
.zeawin-shadow-sm { box-shadow: var(--zeawin-shadow-sm); }
.zeawin-shadow-base { box-shadow: var(--zeawin-shadow-base); }
.zeawin-shadow-md { box-shadow: var(--zeawin-shadow-md); }
.zeawin-shadow-lg { box-shadow: var(--zeawin-shadow-lg); }
.zeawin-shadow-brand { box-shadow: var(--zeawin-shadow-brand); }

/* Component Classes */
.zeawin-card {
    background: var(--zeawin-color-white);
    border: 1px solid var(--zeawin-color-gray-200);
    border-radius: var(--zeawin-radius-md);
    padding: var(--zeawin-spacing-5);
    box-shadow: var(--zeawin-shadow-base);
    transition: all var(--zeawin-transition-base);
}

.zeawin-card:hover {
    border-color: var(--zeawin-color-primary);
    box-shadow: var(--zeawin-shadow-brand-hover);
    transform: translateY(-1px);
}

.zeawin-btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--zeawin-color-primary);
    color: var(--zeawin-color-white);
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--zeawin-transition-base), box-shadow var(--zeawin-transition-base);
    text-decoration: none;
}

.zeawin-btn:hover {
    background: var(--zeawin-color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--zeawin-shadow-brand-hover);
}

.zeawin-btn-secondary {
    background: var(--zeawin-color-gray-100);
    color: var(--zeawin-color-text-primary);
}

.zeawin-btn-secondary:hover {
    background: var(--zeawin-color-gray-200);
}

.zeawin-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zeawin-badge-success {
    background: var(--zeawin-color-success-bg);
    color: var(--zeawin-color-success-text);
}

.zeawin-badge-warning {
    background: var(--zeawin-color-warning-bg);
    color: var(--zeawin-color-warning-text);
}

.zeawin-badge-danger {
    background: var(--zeawin-color-danger-bg);
    color: var(--zeawin-color-danger-text);
}

.zeawin-badge-info {
    background: var(--zeawin-color-info-bg);
    color: var(--zeawin-color-info-text);
}

/* Container Classes */
.zeawin-container {
    max-width: var(--zeawin-layout-max-width);
    margin: 0 auto;
    padding: 0 var(--zeawin-layout-container-padding);
}

/* Full-width override for dashboard */
.qms-dashboard-container.zeawin-container {
    max-width: 100%;
}

.zeawin-section {
    padding: var(--zeawin-layout-section-gap) 0;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .zeawin-container {
        padding: 0 15px;
    }

    .zeawin-section {
        padding: 30px 0;
    }
}