/**
 * Base Styles
 * 
 * CSS Variables, Resets, and Foundation
 * 
 * @package Commerce_Elite
 */

/* ============================================
   CSS VARIABLES (Design System)
   ============================================ */

:root {
    /* Colors - LaNoira Brand Palette */
    --color-primary: #4a0e0e;        /* Rich burgundy - main brand color */
    --color-primary-dark: #2c2222;   /* Deep chocolate brown - darker shade */
    --color-primary-light: #f6e4e4;  /* Soft blush pink - lighter shade */
    
    --color-secondary: #8b6f6f;      /* Muted mauve - supporting color */
    --color-secondary-dark: #6b4f4f; /* Darker mauve */
    --color-secondary-light: #d4c4c4; /* Light mauve */
    
    --color-accent: #d63638;         /* Accent red - kept for urgency/errors */
    --color-accent-dark: #a92a2a;    /* Dark red */
    --color-accent-light: #f86368;   /* Light red */
    
    /* Colors - Neutrals */
    --color-background: #ffffff;     /* Pure white background */
    --color-surface: #fdfbf7;        /* Very light warm beige - for cards/sections */
    --color-surface-dark: #f6f4f0;   /* Light warm gray */
    
    --color-text: #2c2222;           /* Dark brown - primary text (matches brand) */
    --color-text-light: #6b4f4f;     /* Medium brown - secondary text */
    --color-text-muted: #a89999;     /* Light brown - muted text */
    
    --color-border: #e8e0de;         /* Soft neutral border */
    --color-border-light: #f6f4f0;   /* Very light border */
    
    /* Colors - Semantic (kept functional) */
    --color-success: #00a32a;        /* Green for success states */
    --color-error: #d63638;          /* Red for errors */
    --color-warning: #dba617;        /* Yellow for warnings */
    --color-info: #4a0e0e;           /* Brand color for info */
    
    /* Colors - Links */
    --color-link: #4a0e0e;           /* Brand burgundy for links */
    --color-link-hover: #2c2222;     /* Darker brown on hover */
    --color-link-external: #d63638;  /* Red for external links */
    
    /* Typography - LaNoira Fonts */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-secondary: 'Playfair Display', Georgia, "Times New Roman", serif;
    --font-mono: Consolas, Monaco, monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 2rem;        /* 32px */
    --font-size-3xl: 2.5rem;      /* 40px */
    --font-size-4xl: 3rem;        /* 48px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing Scale */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 3rem;      /* 48px */
    --space-xl: 4.5rem;    /* 72px */
    --space-2xl: 6rem;     /* 96px */
    
    /* Container Widths */
    --container-xs: 640px;
    --container-sm: 768px;
    --container-md: 1024px;
    --container-lg: 1280px;
    --container-xl: 1440px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows - Premium Layered */
    --shadow-sm: 0 1px 2px rgba(44, 34, 34, 0.04);
    --shadow-md: 0 4px 6px rgba(44, 34, 34, 0.07), 0 2px 4px rgba(44, 34, 34, 0.04);
    --shadow-lg: 0 10px 15px rgba(44, 34, 34, 0.1), 0 4px 6px rgba(44, 34, 34, 0.05);
    --shadow-xl: 0 20px 25px rgba(44, 34, 34, 0.1), 0 8px 10px rgba(44, 34, 34, 0.04);
    --shadow-2xl: 0 25px 50px rgba(44, 34, 34, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Mobile adjustments - 33% reduction */
@media (max-width: 768px) {
    :root {
        --space-xs: 0.33rem;   /* ~5px */
        --space-sm: 0.66rem;   /* ~11px */
        --space-md: 1rem;      /* 16px */
        --space-lg: 2rem;      /* 32px */
        --space-xl: 3rem;      /* 48px */
        --space-2xl: 4rem;     /* 64px */
    }
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

/* Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

/* Body defaults */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Improve text rendering */
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

/* Lists */
ul, ol {
    padding-left: var(--space-md);
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Links */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

/* External links */
a[href^="http"]:not([href*="yourdomain.com"]) {
    color: var(--color-link-external);
}

/* Images */
img,
picture {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove animations for people who prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   CONTAINER
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.container-wide {
    max-width: var(--container-xl);
}

.container-narrow {
    max-width: var(--container-md);
}

/* ============================================
   UTILITIES
   ============================================ */

/* Screen Reader Only */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    clip: auto !important;
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Focus Outline */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}