/*
 * Card Games - Design Tokens
 * Centralized CSS variables following best practices
 * Organized using ITCSS (Inverted Triangle CSS) methodology
 */

/* ==========================================================================
   Settings - Global variables and config
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Colors - Semantic color naming
       ---------------------------------------------------------------------- */
    
    /* Background colors */
    --bg-primary: #1a3d2e;
    --bg-secondary: #0d1f16;
    --bg-tertiary: #1a2f23;
    
    /* Surface colors (cards, tables, containers) */
    --surface-card: #fefefe;
    --surface-card-back: #2a4a6b;
    --surface-card-back-border: #3a5a7a;
    --surface-table: #0f2318;
    --surface-table-border: #3d6b4a;
    
    /* Text colors */
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-inverse: #1a1a1a;
    --text-color: var(--text-primary); /* Legacy compatibility */
    
    /* Accent colors */
    --accent-gold: #d4af37;
    --accent-gold-light: #f4d03f;
    --accent-gold-dark: #b8962e;
    --accent-color: var(--accent-gold); /* Legacy compatibility */
    
    /* Interactive states */
    --state-selected: #ffd700;
    --state-valid: #4ade80;
    --state-error: #ef4444;
    --state-success: #5faa70;
    
    /* Legacy aliases */
    --card-bg: var(--surface-card);
    --card-back: var(--surface-card-back);
    --card-back-border: var(--surface-card-back-border);
    --table-color: var(--surface-table);
    --table-border: var(--surface-table-border);
    --selected-color: var(--state-selected);
    --valid-color: var(--state-valid);
    --error-color: var(--state-error);
    --success-color: var(--state-success);
    --text-muted: var(--text-secondary);
    
    /* ----------------------------------------------------------------------
       Spacing Scale - Consistent spacing using 4px base unit
       ---------------------------------------------------------------------- */
    --space-unit: 4px;
    --space-xs: calc(var(--space-unit) * 1);   /* 4px */
    --space-sm: calc(var(--space-unit) * 2);   /* 8px */
    --space-md: calc(var(--space-unit) * 3);   /* 12px */
    --space-lg: calc(var(--space-unit) * 4);   /* 16px */
    --space-xl: calc(var(--space-unit) * 6);   /* 24px */
    --space-2xl: calc(var(--space-unit) * 8);  /* 32px */
    --space-3xl: calc(var(--space-unit) * 12); /* 48px */
    
    /* ----------------------------------------------------------------------
       Sizing - Component-specific sizes
       ---------------------------------------------------------------------- */
    --card-width: 70px;
    --card-height: 98px;
    --card-gap: var(--space-md); /* 12px */
    --border-radius: var(--space-md); /* 12px */
    --border-radius-sm: 4px;
    
    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    
    /* Font sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    
    /* ----------------------------------------------------------------------
       Transitions
       ---------------------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* ----------------------------------------------------------------------
       Z-index Scale
       ---------------------------------------------------------------------- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 1100;
    
    /* ----------------------------------------------------------------------
       Component-specific colors
       ---------------------------------------------------------------------- */
    --button-bg: #3d5c45;
    --button-hover: #4a7a56;
}

/* ==========================================================================
   Theme Application
   ========================================================================== */

/* Dark theme background gradient */
body {
    background: linear-gradient(
        135deg,
        var(--bg-primary) 0%,
        var(--bg-secondary) 50%,
        var(--bg-tertiary) 100%
    );
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text colors */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

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

.text-inverse {
    color: var(--text-inverse);
}

/* Background colors */
.bg-primary {
    background-color: var(--bg-primary);
}

.bg-surface {
    background-color: var(--surface-table);
}

/* Spacing utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Flex utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

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

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

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

/* Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Background colors */
.bg-table {
    background: var(--table-color);
    border-color: var(--table-border);
}

/* Button base styles */
.btn {
    background: var(--button-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    background: var(--button-hover);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: scale(0.95);
}

/* Utility classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}