/**
 * Global Blueprint for BinFresh
 * Contains centralized design tokens aligned with GeneratePress.
 */

:root {
    /* Colors.
       NOTE: style.css also declares :root and, loading after this file, wins for the
       two shared brand tokens below — keep the two files in sync (blueprint also owns
       --brand-background/surface and the --text-* set; style.css owns
       --text-dark/--text-light/--bg-light/--bg-white) until they are fully merged. */
    --brand-primary: #0f172a; /* Deep premium navy (matches style.css) */
    --brand-secondary: #24b335; /* BinFresh logo grass-green (matches style.css) */
    --brand-accent: #f59e0b; /* Warning/Accent Orange */
    --brand-background: #f8fafc; /* Light Gray Background */
    --brand-surface: #ffffff; /* White Surface */
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-inverse: #ffffff;
    
    /* Border & Separators */
    --border-color: #e2e8f0;
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    /* Spacing Framework */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Global Typography Resets */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--brand-primary);
}

/* Global Form Resets */
input, select, textarea, button {
    font-family: var(--font-body);
}

/* Global Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* Global Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: none;
    text-decoration: none;
    font-family: var(--font-heading);
}

.btn-primary {
    background-color: var(--brand-secondary);
    color: var(--text-inverse);
    box-shadow: 0 4px 15px rgba(36, 179, 53, 0.3);
}

.btn-primary:hover, .btn-primary:active {
    background-color: #00a355;
    transform: translateY(-2px);
    color: var(--text-inverse);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover, .btn-secondary:active {
    background-color: var(--brand-background);
}