/**
 * Theme Variables - Light/Dark Mode Support
 *
 * This file defines semantic CSS variables that change based on the theme.
 * Use these variables instead of hardcoded colors for theme-aware styling.
 *
 * Usage: var(--theme-bg-primary), var(--theme-text-primary), etc.
 */

:root {
    /* ============================================
       BASE COLOR PALETTE (Reference Only)
       ============================================ */

    /* Grays */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Navy (Dark backgrounds) */
    --color-navy-900: #0a2540;
    --color-navy-800: #0f172a;
    --color-navy-700: #1e293b;
    --color-navy-600: #334155;
    --color-navy-500: #475569;

    /* Teal (Client Portal accent) */
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;

    /* Green (Staff/Affiliate accent) */
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;

    /* Status Colors */
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-yellow-500: #eab308;
    --color-yellow-600: #d97706;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;

    /* ============================================
       SEMANTIC THEME VARIABLES - LIGHT MODE
       ============================================ */

    /* Backgrounds */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f9fafb;
    --theme-bg-tertiary: #f3f4f6;
    --theme-bg-elevated: #ffffff;
    --theme-bg-inverse: #0f172a;

    /* Sidebar (Staff Dashboard) */
    --theme-sidebar-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    --theme-sidebar-text: #e2e8f0;
    --theme-sidebar-text-muted: #94a3b8;
    --theme-sidebar-border: rgba(255, 255, 255, 0.1);
    --theme-sidebar-hover: rgba(255, 255, 255, 0.05);

    /* Text */
    --theme-text-primary: #111827;
    --theme-text-secondary: #4b5563;
    --theme-text-muted: #6b7280;
    --theme-text-placeholder: #9ca3af;
    --theme-text-inverse: #f9fafb;

    /* Borders */
    --theme-border-primary: #e5e7eb;
    --theme-border-secondary: #f3f4f6;
    --theme-border-focus: #0d9488;

    /* Accents (Portal-specific, can be overridden) */
    --theme-accent: #0d9488;
    --theme-accent-light: #14b8a6;
    --theme-accent-dark: #0f766e;
    --theme-accent-bg: rgba(13, 148, 136, 0.1);

    /* Status */
    --theme-success: #22c55e;
    --theme-success-bg: rgba(34, 197, 94, 0.1);
    --theme-warning: #eab308;
    --theme-warning-bg: rgba(234, 179, 8, 0.1);
    --theme-danger: #ef4444;
    --theme-danger-bg: rgba(239, 68, 68, 0.1);
    --theme-info: #3b82f6;
    --theme-info-bg: rgba(59, 130, 246, 0.1);

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

    /* Gradients */
    --theme-gradient-hero: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
    --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dark) 100%);
    --theme-gradient-card: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

    /* Cards */
    --theme-card-bg: #ffffff;
    --theme-card-border: #e5e7eb;
    --theme-card-shadow: var(--theme-shadow-md);

    /* Forms */
    --theme-input-bg: #ffffff;
    --theme-input-border: #d1d5db;
    --theme-input-text: #111827;
    --theme-input-placeholder: #9ca3af;
    --theme-input-focus-ring: rgba(13, 148, 136, 0.2);

    /* Tables */
    --theme-table-header-bg: #f9fafb;
    --theme-table-row-hover: #f3f4f6;
    --theme-table-border: #e5e7eb;

    /* Overlays */
    --theme-overlay: rgba(0, 0, 0, 0.5);
    --theme-modal-bg: #ffffff;

    /* ─────────────────────────────────────────────
       PREMIUM TOKENS (design-review 2026-04-30)
       Multi-layer shadows, refined radii, surface
       elevation. Inspired by sign.dropbox.com,
       openai.com/about, luma.com, gamma.app.
       ───────────────────────────────────────────── */

    /* Spacing scale */
    --pr-space-1: 4px;
    --pr-space-2: 8px;
    --pr-space-3: 12px;
    --pr-space-4: 16px;
    --pr-space-5: 20px;
    --pr-space-6: 24px;
    --pr-space-8: 32px;
    --pr-space-10: 40px;
    --pr-space-12: 48px;
    --pr-space-16: 64px;

    /* Radii */
    --pr-radius-xs: 4px;
    --pr-radius-sm: 6px;
    --pr-radius-md: 10px;
    --pr-radius-lg: 14px;
    --pr-radius-xl: 20px;
    --pr-radius-full: 999px;

    /* Multi-layer shadows (light mode) — subtle, low-contrast */
    --pr-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --pr-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px 0 rgb(15 23 42 / 0.04);
    --pr-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
    --pr-shadow-lg: 0 12px 18px -4px rgb(15 23 42 / 0.08), 0 4px 8px -4px rgb(15 23 42 / 0.05);
    --pr-shadow-xl: 0 20px 32px -8px rgb(15 23 42 / 0.12), 0 8px 16px -8px rgb(15 23 42 / 0.08);

    /* Accent glow (works in both themes) */
    --pr-glow-accent: 0 0 0 1px rgb(34 197 94 / 0.18), 0 4px 16px -4px rgb(34 197 94 / 0.30);
    --pr-glow-accent-soft: 0 0 0 1px rgb(34 197 94 / 0.12), 0 2px 12px -4px rgb(34 197 94 / 0.18);

    /* Hairline highlight (top edge) for elevated surfaces */
    --pr-highlight-inner: inset 0 1px 0 0 rgb(255 255 255 / 0.65);

    /* Surface gradient — very subtle warm-cool variation that reads as "premium" */
    --pr-surface-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0) 100%);
    --pr-surface-bg: #ffffff;
    --pr-surface-bg-elevated: #ffffff;

    /* Hairline border (more refined than rgba(0,0,0,0.1)) */
    --pr-border-hairline: rgb(15 23 42 / 0.08);
    --pr-border-hairline-strong: rgb(15 23 42 / 0.14);

    /* Type tokens */
    --pr-letter-tight: -0.015em;
    --pr-letter-tighter: -0.025em;
    --pr-leading-tight: 1.2;
    --pr-leading-snug: 1.35;
    --pr-leading-relaxed: 1.6;

    /* ─────────────────────────────────────────────
       BRAND PALETTE (locked 2026-05-02)
       Serious financial-institution constraint:
       5 core colors. No gradients on containers,
       no ad-hoc green/blue/purple/orange. Status
       semantics use desaturated tints, not surfaces.
       ───────────────────────────────────────────── */
    --brand-ink:        #0f172a;  /* text, headings, primary buttons (dark mode flips) */
    --brand-paper:      #ffffff;  /* surface — cards, modals, inputs */
    --brand-page:       #f8fafc;  /* page background */
    --brand-hairline:   rgb(15 23 42 / 0.08);   /* all borders */
    --brand-green:      #16a34a;  /* the ONE accent — links, primary CTA, active state */

    /* Semantic accents (for status pills and subtle highlights only —
       NEVER as full surface backgrounds). Each pairs an ink with a tint. */
    --status-success-ink:  #15803d;
    --status-success-bg:   rgb(22 163 74 / 0.08);
    --status-warning-ink:  #b45309;
    --status-warning-bg:   rgb(180 83 9 / 0.08);
    --status-danger-ink:   #b91c1c;
    --status-danger-bg:    rgb(185 28 28 / 0.08);
    --status-neutral-ink:  #475569;
    --status-neutral-bg:   rgb(71 85 105 / 0.08);

    /* ─────────────────────────────────────────────
       TYPE SCALE (added 2026-05-28)
       Distilled from a usage audit (top 8 in-repo
       font-sizes covered ≥85% of all declarations).
       Use these tokens in new work; older inline
       styles will migrate opportunistically.
       ───────────────────────────────────────────── */
    /* Family: one stack for everything — no serif anywhere (2026-07 de-serif
       sweep). --font-display/-primary/-body exist only as aliases so legacy
       per-page tokens resolve here; new work uses --font-sans directly. */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'Monaco', 'Consolas', monospace;
    --font-display: var(--font-sans);
    --font-primary: var(--font-sans);
    --font-body:    var(--font-sans);

    --font-size-xs:   11px;  /* labels, captions, table meta */
    --font-size-sm:   12px;  /* secondary body, dense table cells */
    --font-size-base: 13px;  /* primary body in dashboard chrome */
    --font-size-md:   14px;  /* primary body in portal/marketing */
    --font-size-lg:   16px;  /* lead paragraphs, form inputs */
    --font-size-xl:   20px;  /* section subheads */
    --font-size-2xl:  24px;  /* card titles, panel heads */
    --font-size-3xl:  28px;  /* page-level KPI values */
    --font-size-4xl:  32px;  /* hero stats */

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

    /* Canonical card surface (the locked default: flat, hairline, no shadow) */
    --ds-card-radius:    0;
    --ds-card-bg:        var(--brand-paper);
    --ds-card-border:    1px solid var(--brand-hairline);
    --ds-card-shadow:    none;
    --ds-card-padding:   var(--pr-space-5);
}

/* ============================================
   DARK MODE — DISABLED (2026-05)
   Toggle hidden, JS forces light. Overrides below
   retained for future re-enable once inline styles
   in 180+ templates have been audited for dark
   contrast. Do not delete the [data-theme="dark"]
   rules until adoption is complete.
   ============================================ */

[data-theme-toggle],
.sidebar-theme-toggle,
.theme-toggle-btn {
    display: none !important;
}

/* ============================================
   DARK MODE OVERRIDES (inert while disabled above)
   ============================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --theme-bg-primary: #0f172a;
    --theme-bg-secondary: #1e293b;
    --theme-bg-tertiary: #334155;
    --theme-bg-elevated: #1e293b;
    --theme-bg-inverse: #f9fafb;

    /* Premium tokens — dark variants. Heavier blur, more saturated glow. */
    --pr-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --pr-shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.18);
    --pr-shadow-md: 0 6px 10px -2px rgb(0 0 0 / 0.35), 0 3px 6px -3px rgb(0 0 0 / 0.22);
    --pr-shadow-lg: 0 16px 24px -8px rgb(0 0 0 / 0.45), 0 6px 12px -6px rgb(0 0 0 / 0.30);
    --pr-shadow-xl: 0 24px 40px -12px rgb(0 0 0 / 0.55), 0 10px 20px -10px rgb(0 0 0 / 0.35);
    --pr-glow-accent: 0 0 0 1px rgb(34 197 94 / 0.30), 0 4px 24px -4px rgb(34 197 94 / 0.45);
    --pr-glow-accent-soft: 0 0 0 1px rgb(34 197 94 / 0.20), 0 2px 16px -4px rgb(34 197 94 / 0.25);
    --pr-highlight-inner: inset 0 1px 0 0 rgb(255 255 255 / 0.06);
    --pr-surface-gradient: linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0) 100%);
    --pr-surface-bg: #1e293b;
    --pr-surface-bg-elevated: #243046;
    --pr-border-hairline: rgb(255 255 255 / 0.07);
    --pr-border-hairline-strong: rgb(255 255 255 / 0.12);

    /* Brand palette — dark variants */
    --brand-ink:      #f1f5f9;
    --brand-paper:    #1e293b;
    --brand-page:     #0f172a;
    --brand-hairline: rgb(255 255 255 / 0.08);
    --brand-green:    #22c55e;
    --status-success-ink:  #4ade80;
    --status-success-bg:   rgb(34 197 94 / 0.12);
    --status-warning-ink:  #fbbf24;
    --status-warning-bg:   rgb(251 191 36 / 0.10);
    --status-danger-ink:   #f87171;
    --status-danger-bg:    rgb(248 113 113 / 0.10);
    --status-neutral-ink:  #94a3b8;
    --status-neutral-bg:   rgb(148 163 184 / 0.10);

    /* Sidebar - stays dark in dark mode too */
    --theme-sidebar-bg: linear-gradient(180deg, #0a0a14 0%, #0d1321 100%);
    --theme-sidebar-text: #e2e8f0;
    --theme-sidebar-text-muted: #94a3b8;
    --theme-sidebar-border: rgba(255, 255, 255, 0.05);
    --theme-sidebar-hover: rgba(255, 255, 255, 0.08);

    /* Text */
    --theme-text-primary: #f1f5f9;
    --theme-text-secondary: #cbd5e1;
    --theme-text-muted: #94a3b8;
    --theme-text-placeholder: #64748b;
    --theme-text-inverse: #0f172a;

    /* Borders */
    --theme-border-primary: rgba(255, 255, 255, 0.1);
    --theme-border-secondary: rgba(255, 255, 255, 0.05);
    --theme-border-focus: #14b8a6;

    /* Accents - slightly brighter in dark mode */
    --theme-accent: #14b8a6;
    --theme-accent-light: #2dd4bf;
    --theme-accent-dark: #0d9488;
    --theme-accent-bg: rgba(20, 184, 166, 0.15);

    /* Status - slightly brighter backgrounds */
    --theme-success: #4ade80;
    --theme-success-bg: rgba(74, 222, 128, 0.15);
    --theme-warning: #fbbf24;
    --theme-warning-bg: rgba(251, 191, 36, 0.15);
    --theme-danger: #f87171;
    --theme-danger-bg: rgba(248, 113, 113, 0.15);
    --theme-info: #60a5fa;
    --theme-info-bg: rgba(96, 165, 250, 0.15);

    /* Shadows - more pronounced in dark mode */
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

    /* Gradients */
    --theme-gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dark) 100%);
    --theme-gradient-card: linear-gradient(135deg, #1e293b 0%, #334155 100%);

    /* Cards */
    --theme-card-bg: #1e293b;
    --theme-card-border: rgba(255, 255, 255, 0.1);
    --theme-card-shadow: var(--theme-shadow-md);

    /* Forms */
    --theme-input-bg: #0f172a;
    --theme-input-border: #475569;
    --theme-input-text: #f1f5f9;
    --theme-input-placeholder: #64748b;
    --theme-input-focus-ring: rgba(20, 184, 166, 0.3);

    /* Tables */
    --theme-table-header-bg: #1e293b;
    --theme-table-row-hover: #334155;
    --theme-table-border: rgba(255, 255, 255, 0.1);

    /* Overlays */
    --theme-overlay: rgba(0, 0, 0, 0.7);
    --theme-modal-bg: #1e293b;
}

/* ============================================
   PORTAL-SPECIFIC ACCENT OVERRIDES
   ============================================ */

/* Client Portal - Teal accent */
.portal-client,
[data-portal="client"] {
    --theme-accent: #0d9488;
    --theme-accent-light: #14b8a6;
    --theme-accent-dark: #0f766e;
}

[data-theme="dark"] .portal-client,
[data-theme="dark"][data-portal="client"] {
    --theme-accent: #14b8a6;
    --theme-accent-light: #2dd4bf;
    --theme-accent-dark: #0d9488;
}

/* Staff Dashboard - Green accent */
.portal-staff,
[data-portal="staff"] {
    --theme-accent: #22c55e;
    --theme-accent-light: #4ade80;
    --theme-accent-dark: #16a34a;
}

[data-theme="dark"] .portal-staff,
[data-theme="dark"][data-portal="staff"] {
    --theme-accent: #4ade80;
    --theme-accent-light: #86efac;
    --theme-accent-dark: #22c55e;
}

/* Affiliate Portal - Green accent */
.portal-affiliate,
[data-portal="affiliate"] {
    --theme-accent: #22c55e;
    --theme-accent-light: #4ade80;
    --theme-accent-dark: #16a34a;
}

[data-theme="dark"] .portal-affiliate,
[data-theme="dark"][data-portal="affiliate"] {
    --theme-accent: #4ade80;
    --theme-accent-light: #86efac;
    --theme-accent-dark: #22c55e;
}

/* ============================================
   UTILITY CLASSES FOR THEME-AWARE STYLING
   ============================================ */

/* Backgrounds */
.bg-theme-primary { background-color: var(--theme-bg-primary); }
.bg-theme-secondary { background-color: var(--theme-bg-secondary); }
.bg-theme-tertiary { background-color: var(--theme-bg-tertiary); }
.bg-theme-elevated { background-color: var(--theme-bg-elevated); }
.bg-theme-card { background-color: var(--theme-card-bg); }

/* Text */
.text-theme-primary { color: var(--theme-text-primary); }
.text-theme-secondary { color: var(--theme-text-secondary); }
.text-theme-muted { color: var(--theme-text-muted); }
.text-theme-accent { color: var(--theme-accent); }

/* Borders */
.border-theme-primary { border-color: var(--theme-border-primary); }
.border-theme-secondary { border-color: var(--theme-border-secondary); }

/* Cards */
.card-theme {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    box-shadow: var(--theme-card-shadow);
}

/* Transitions for smooth theme switching */
.theme-transition,
.theme-transition * {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

/* ============================================
   DARK MODE COMPAT LAYER (design-review-2026-04)
   ============================================
   ~40 dashboard templates have inline <style> blocks that hardcode light
   colors (background: white, color: #1a1a2e). These overrides target the
   common class names so hitting the theme toggle actually flips them.
   Scoped under [data-theme="dark"] body so they never affect light mode. */
[data-theme="dark"] body { background: var(--theme-bg-primary, #0a2540); color: var(--theme-text-primary, #e5e7eb); }
[data-theme="dark"] .main-content { background: var(--theme-bg-secondary, #0f172a); color: var(--theme-text-primary, #e5e7eb); }
[data-theme="dark"] .main-content h1,
[data-theme="dark"] .main-content h2,
[data-theme="dark"] .main-content h3,
[data-theme="dark"] .main-content h4,
[data-theme="dark"] .main-content h5,
[data-theme="dark"] .main-content h6 { color: var(--theme-text-primary, #f1f5f9); }
[data-theme="dark"] .main-content p,
[data-theme="dark"] .main-content label,
[data-theme="dark"] .main-content span:not([class]) { color: var(--theme-text-secondary, #cbd5e1); }

[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .widget,
[data-theme="dark"] .tile,
[data-theme="dark"] .summary-card {
    background: var(--theme-card-bg, #1e293b);
    color: var(--theme-text-primary, #e5e7eb);
    border-color: var(--theme-card-border, #334155);
}
/* Don't fight pages that intentionally make a card a colored highlight */
[data-theme="dark"] .card.highlight,
[data-theme="dark"] .stat-card.highlight,
[data-theme="dark"] .metric-card.highlight,
[data-theme="dark"] .card.success,
[data-theme="dark"] .stat-card.success,
[data-theme="dark"] .metric-card.success { background: inherit; }

[data-theme="dark"] table { color: var(--theme-text-primary, #e5e7eb); }
[data-theme="dark"] th { background: var(--theme-bg-elevated, #1e293b); color: var(--theme-text-primary, #f1f5f9); }
[data-theme="dark"] td { border-color: var(--theme-border-primary, #334155); }
[data-theme="dark"] tr:hover td { background: var(--theme-bg-elevated, #1e293b); }

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--theme-input-bg, #0f172a);
    color: var(--theme-text-primary, #e5e7eb);
    border-color: var(--theme-input-border, #334155);
}

/* Modals & overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background: var(--theme-card-bg, #1e293b);
    color: var(--theme-text-primary, #e5e7eb);
}