/**
 * QR Theme - Shared Design Tokens & Base Patterns
 *
 * Loaded by both the QR modal (gb_post.php) and the mobile upload page
 * (mobile_upload.php) to ensure visual consistency.
 *
 * CSS variable scoping: Variables are set on :root because this file is
 * only loaded on QR-specific pages. User-specific overrides are applied
 * via inline <style> blocks generated by QrUploadStyleService::generateCssVariables().
 */

/* ==========================================
   Design Tokens (Defaults)
   ========================================== */

:root {
    /* Colors (overridden by PHP-generated inline :root) */
    --qr-btn-color1: #667eea;
    --qr-btn-color2: #764ba2;
    --qr-btn-text: #ffffff;
    --qr-header-color1: #667eea;
    --qr-header-color2: #764ba2;
    --qr-header-text: #ffffff;
    --qr-bg: #ffffff;
    --qr-text: #333333;

    /* Layout Tokens */
    --qr-radius-sm: 4px;
    --qr-radius-md: 8px;
    --qr-spacing-sm: 12px;
    --qr-spacing-md: 16px;
    --qr-spacing-lg: 24px;
    --qr-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Borders & Focus */
    --qr-border-color: #e0e0e0;
    --qr-focus-ring: 2px solid var(--qr-header-color1);
    --qr-transition-fast: 0.2s ease;

    /* Typography */
    --qr-font-size-sm: 12px;
    --qr-font-size-md: 14px;
    --qr-font-size-lg: 16px;
    --qr-font-size-xl: 20px;
    --qr-line-height: 1.5;

    /* Status Colors */
    --qr-status-info-bg: #e8f4fd;
    --qr-status-info-border: #90caf9;
    --qr-status-info-text: #1976d2;
    --qr-status-success-bg: #e8f5e9;
    --qr-status-success-border: #81c784;
    --qr-status-success-text: #388e3c;
    --qr-status-error-bg: #ffebee;
    --qr-status-error-border: #e57373;
    --qr-status-error-text: #d32f2f;
}

/* ==========================================
   Shared Status Box Pattern
   ========================================== */

.qr-status-box {
    display: flex;
    align-items: center;
    gap: var(--qr-spacing-sm);
    padding: var(--qr-spacing-sm) var(--qr-spacing-md);
    border-radius: var(--qr-radius-sm);
    font-size: var(--qr-font-size-md);
    line-height: var(--qr-line-height);
}

.qr-status-box--info {
    background: var(--qr-status-info-bg);
    border: 1px solid var(--qr-status-info-border);
    color: var(--qr-status-info-text);
}

.qr-status-box--success {
    background: var(--qr-status-success-bg);
    border: 2px solid var(--qr-status-success-border);
    color: var(--qr-status-success-text);
}

.qr-status-box--error {
    background: var(--qr-status-error-bg);
    border: 2px solid var(--qr-status-error-border);
    color: var(--qr-status-error-text);
}

/* ==========================================
   Shared Button Base Style
   ========================================== */

.qr-btn-base {
    display: inline-block;
    padding: var(--qr-spacing-sm) var(--qr-spacing-lg);
    border: none;
    border-radius: var(--qr-radius-sm);
    font-size: var(--qr-font-size-lg);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--qr-transition-fast);
    min-height: 44px;
    line-height: var(--qr-line-height);
}

.qr-btn-base:focus-visible {
    outline: var(--qr-focus-ring);
    outline-offset: 2px;
}

.qr-btn-base:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}