/**
 * CSS Variables for JamboQR Theme System
 * Defines colors, spacing, typography for light and dark themes
 */

:root {
    /* ===== Light Theme (Default) ===== */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #dbeafe;

    --color-secondary: #10b981;
    --color-secondary-hover: #059669;
    --color-secondary-light: #d1fae5;

    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: #fee2e2;

    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: #fef3c7;

    --color-info: #3b82f6;
    --color-info-hover: #2563eb;
    --color-info-light: #dbeafe;

    /* Background colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-hover: #f3f4f6;
    --color-bg-active: #e5e7eb;

    /* Text colors */
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-text-inverse: #ffffff;

    /* Border colors */
    --color-border-primary: #e5e7eb;
    --color-border-secondary: #d1d5db;
    --color-border-focus: #2563eb;

    /* Short-form aliases used by components.css */
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --border-primary: var(--color-border-primary);
    /* components.css references --border-color / --primary-color / --error-color
       which were never defined -> every `border: 1px solid var(--border-color)`
       was invalid and collapsed to border-style:none (invisible inputs, cards,
       tabs, dropzones). Define them here; they follow the active theme because
       the underlying --color-* tokens are redefined per [data-theme]. */
    --border-color: var(--color-border-secondary);
    --primary-color: var(--color-primary);
    --error-color: var(--color-danger);
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);

    /* Toast backgrounds (light theme) */
    --success-bg: #ecfdf5;
    --error-bg: #fef2f2;
    --warning-bg: #fffbeb;
    --info-bg: #eff6ff;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Spacing */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* Border radius */
    --radius-sm: 0.25rem;  /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem;   /* 8px */
    --radius-xl: 0.75rem;  /* 12px */
    --radius-2xl: 1rem;    /* 16px */
    --radius-full: 9999px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-light: #1e3a8a;

    --color-secondary: #10b981;
    --color-secondary-hover: #34d399;
    --color-secondary-light: #064e3b;

    --color-danger: #ef4444;
    --color-danger-hover: #f87171;
    --color-danger-light: #7f1d1d;

    --color-warning: #f59e0b;
    --color-warning-hover: #fbbf24;
    --color-warning-light: #78350f;

    --color-info: #3b82f6;
    --color-info-hover: #60a5fa;
    --color-info-light: #1e3a8a;

    /* Background colors */
    --color-bg-primary: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;
    --color-bg-hover: #374151;
    --color-bg-active: #4b5563;

    /* Text colors */
    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;
    --color-text-inverse: #111827;

    /* Border colors */
    --color-border-primary: #374151;
    --color-border-secondary: #4b5563;
    --color-border-focus: #3b82f6;

    /* Toast backgrounds */
    --success-bg: #064e3b;
    --error-bg: #7f1d1d;
    --warning-bg: #78350f;
    --info-bg: #1e3a8a;

    /* Shadow (adjusted for dark mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
}

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

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

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

/* Brand colors */
.text-brand-primary { color: var(--color-primary); }
.bg-brand-primary { background-color: var(--color-primary); }
.text-danger { color: var(--color-danger); }
.bg-danger { background-color: var(--color-danger); }
.text-success { color: var(--color-secondary); }
.bg-success { background-color: var(--color-secondary); }
.text-warning { color: var(--color-warning); }
.bg-warning { background-color: var(--color-warning); }

/* 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); }

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

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ===== Language picker (#lang-toggle-container) =====
   Native <select>/<option> render their popped-open list with the OS
   theme by default, which made the list white-on-white in dark mode.
   Force the surface colour from the active theme and tell the browser
   to use the theme's colour scheme so scrollbars and the option list
   match. Light theme inherits the same rule and stays light. */
#lang-toggle-container select,
#lang-toggle-container option {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
[data-theme="dark"] #lang-toggle-container select {
    color-scheme: dark;
}
:root:not([data-theme="dark"]) #lang-toggle-container select {
    color-scheme: light;
}