/* ============================================================
   DESIGN SYSTEM TOKENS — Inspección QR
   Central variable definitions for light/dark themes.
   No component rules here — tokens & scales only.
   ============================================================ */

/* ---- Google Fonts (preloaded in HTML) ---- */
/* Inter: 400, 500, 600, 700 */

/* ====================
   LIGHT THEME (default)
   ==================== */
:root {
    /* — Brand — */
    --brand-primary: #1563ff;
    --brand-primary-hover: #1252d4;
    --brand-primary-active: #104DC7;
    --brand-primary-subtle: rgba(99, 102, 241, .10);
    --brand-primary-rgb: 99, 102, 241;

    --brand-secondary: #0f172a;
    --brand-accent: #f59e0b;
    --brand-accent-hover: #d97706;

    /* — Backgrounds — */
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --bg-surface-raised: #ffffff;
    --bg-sidebar: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --bg-sidebar-solid: #0f172a;
    --bg-navbar: rgba(255, 255, 255, .82);
    --bg-login: linear-gradient(135deg, #0f172a 0%, #1359E6 50%, #1563ff 100%);
    --bg-filter: #f8fafc;
    --bg-muted: #f1f5f9;

    /* — Text — */
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-inverse: #f8fafc;
    --text-link: #1563ff;
    --text-link-hover: #1359E6;

    /* — Borders — */
    --border-color: #e2e8f0;
    --border-color-strong: #cbd5e1;
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* — Shadows — */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);
    --shadow-focus: 0 0 0 3px rgba(5, 78, 226, .25);

    /* — Status — */
    --status-ok: #059669;
    --status-ok-bg: #ecfdf5;
    --status-ok-border: #a7f3d0;

    --status-danger: #dc2626;
    --status-danger-bg: #fef2f2;
    --status-danger-border: #fecaca;

    --status-warning: #d97706;
    --status-warning-bg: #fffbeb;
    --status-warning-border: #fde68a;

    --status-info: #0284c7;
    --status-info-bg: #f0f9ff;
    --status-info-border: #bae6fd;

    /* — Role badge palette — */
    --role-owner-bg: #ede9fe;
    --role-owner-text: #7c3aed;
    --role-admin-bg: #e0f2fe;
    --role-admin-text: #0284c7;
    --role-supervisor-bg: #fef3c7;
    --role-supervisor-text: #b45309;
    --role-guardia-bg: #d1fae5;
    --role-guardia-text: #047857;

    /* — Typography — */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.8125rem;
    /* 13px */
    --font-size-base: 0.9375rem;
    /* 15px */
    --font-size-md: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.75rem;
    /* 28px */

    --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.625;

    /* — Spacing — */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

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

    /* — Layout — */
    --sidebar-width: 270px;
    --navbar-height: 60px;
}

/* ====================
   DARK THEME
   ==================== */
[data-theme="dark"] {
    /* — Brand — */
    --brand-primary: #1563ff;
    --brand-primary-hover: #1252d4;
    --brand-primary-active: #c7d2fe;
    --brand-primary-subtle: rgba(129, 140, 248, .12);
    --brand-primary-rgb: 129, 140, 248;

    --brand-accent: #fbbf24;
    --brand-accent-hover: #fcd34d;

    /* — Backgrounds — */
    --bg-body: #0c1222;
    --bg-surface: #1e293b;
    --bg-surface-hover: #334155;
    --bg-surface-raised: #253348;
    --bg-sidebar: linear-gradient(180deg, #0c1222 0%, #162032 100%);
    --bg-sidebar-solid: #0c1222;
    --bg-navbar: rgba(12, 18, 34, .85);
    --bg-login: linear-gradient(135deg, #0f172a 0%, #1359E6 50%, #1563ff 100%);
    --bg-filter: #162032;
    --bg-muted: #1e293b;

    /* — Text — */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;
    --text-link: #1563ff;
    --text-link-hover: #a5b4fc;

    /* — Borders — */
    --border-color: #334155;
    --border-color-strong: #475569;

    /* — Shadows (more subtle in dark mode) — */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .20);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .20);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .30), 0 2px 4px -2px rgba(0, 0, 0, .20);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .20);
    --shadow-focus: 0 0 0 3px rgba(60, 125, 255, 0.5);

    /* — Status (brighter in dark mode) — */
    --status-ok: #34d399;
    --status-ok-bg: #064e3b;
    --status-ok-border: #065f46;

    --status-danger: #f87171;
    --status-danger-bg: #7f1d1d;
    --status-danger-border: #991b1b;

    --status-warning: #fbbf24;
    --status-warning-bg: #78350f;
    --status-warning-border: #92400e;

    --status-info: #38bdf8;
    --status-info-bg: #0c4a6e;
    --status-info-border: #075985;

    /* — Role badges (muted in dark) — */
    --role-owner-bg: rgba(124, 58, 237, .20);
    --role-owner-text: #c4b5fd;
    --role-admin-bg: rgba(2, 132, 199, .20);
    --role-admin-text: #7dd3fc;
    --role-supervisor-bg: rgba(180, 83, 9, .20);
    --role-supervisor-text: #fcd34d;
    --role-guardia-bg: rgba(4, 120, 87, .20);
    --role-guardia-text: #6ee7b7;
}

/* ====================
   TYPOGRAPHY SCALE (based on tokens)
   ==================== */
h1,
.h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2,
.h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h3,
.h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h4,
.h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h5,
.h5 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h6,
.h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}