/* ============================================================
   EU SwagHub — DESIGN TOKENS  [THEME_TOKENS_2026_06_06]
   ============================================================
   SINGLE SOURCE OF TRUTH for all color in the main app.

   HOW TO RECOLOR THE APP:
   Edit values in this file only. Every component references
   these via var(--token), so a change here cascades app-wide
   (sidebar, dashboard, catalog, login page, everything).

   Token groups:
     BRAND     identity colors        --primary / --accent / --gold (+ variants)
     SEMANTIC  meaning colors         --success / --danger / --warning / --info (+ -bg)
     SURFACE   backgrounds            --bg-* / --card-* / --sidebar-*
     TEXT      foreground             --text-* 
     LINE      borders / dividers     --border / --border-light / --card-border
     GRADIENT  composed gradients     --primary-gradient
     RAMP      neutral grey ramp      --slate-* (used to collapse the many
                                       near-duplicate greys found in the audit)

   Themes: only [data-theme="light"] (= :root) and [data-theme="dark"]
   are reachable. Legacy theme names migrate via theme-switcher.js.

   NOTE: Phase 1 of the color-theme-centralization spec. Values here are
   lifted verbatim from index.html so loading this file is a VISUAL NO-OP.
   Components are converted to var(--token) in later phases.
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
[data-theme="light"], :root {
    /* BRAND */
    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --primary-light: #38bdf8;
    --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    --accent: #8b5cf6;
    --accent-light: #a78bfa;
    /* SURFACE */
    --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --sidebar-dark: #0f172a;
    --sidebar-light: #1e293b;
    --bg-main: linear-gradient(135deg, #f5f0eb 0%, #ede7e0 50%, #e8e2db 100%);
    --bg-card: rgba(255,255,255,0.92);
    --bg-secondary: #f8fafc;
    --card-bg: #ffffff;
    /* CARD SURFACE — ocean-blue gradient used for all card faces in light theme.
       Single source of truth: every light-theme card points at this token, so
       recoloring all cards app-wide = edit this one line. Dark themes leave this
       undefined and fall back to their solid --card-bg. */
    --card-surface: linear-gradient(135deg, #e3f2fd 0%, #cfe8fb 50%, #bce4f2 100%);
    --input-bg: #ffffff;
    --card-border: rgba(15, 23, 42, 0.08);
    --card-outline: transparent;
    /* LINE */
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    /* TEXT */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --theme-name: 'Light';
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
    /* BRAND */
    --primary: #60a5fa;
    --primary-dark: #3b82f6;
    --primary-light: #93c5fd;
    --primary-gradient: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    --accent: #f472b6;
    --accent-light: #f9a8d4;
    /* SURFACE */
    --sidebar-bg: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    --sidebar-dark: #020617;
    --sidebar-light: #0f172a;
    --bg-main: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.92);
    --bg-secondary: #1e293b;
    --card-bg: #1e293b;
    /* Override the ocean --card-surface that :root (light) defines, so the
       light gradient never leaks into dark-family skins (dark/fusion/luxe/
       adobe-dark all set data-theme="dark"). Cards use the solid dark surface. */
    --card-surface: var(--card-bg);
    --input-bg: #1e293b;
    --card-border: rgba(148, 163, 184, 0.12);
    --card-outline: rgba(148, 163, 184, 0.12);
    /* LINE */
    --border: #334155;
    --border-light: #1e293b;
    /* TEXT — tuned for AA contrast on slate */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;
    --theme-name: 'Dark';
}

/* ---------- SEMANTIC + NEUTRALS + SCALES (theme-independent) ---------- */
:root {
    /* BRAND extras */
    --gold: #f59e0b;
    --gold-light: #fbbf24;

    /* SEMANTIC */
    --success: #10b981;
    --success-bg: #d1fae5;
    --success-dark: #059669;
    --success-600: #16a34a;
    --success-light: #34d399;
    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --danger-dark: #dc2626;
    --danger-light: #f87171;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-dark: #b45309;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-600: #2563eb;
    --info-dark: #1d4ed8;

    /* BRAND PALETTE — fixed literal hues (theme-independent).
       Raw brand colors used as fixed accents throughout the app (borders,
       glows, gradient stops). Unlike --primary/--accent (which theme-shift),
       these stay constant in light AND dark — matching today's hardcoded
       values, so referencing them is a visual no-op.
       TO RECOLOR THE BRAND: change these + the --primary/--accent base. */
    --c-cyan: #0ea5e9;
    --c-cyan-light: #38bdf8;
    --c-cyan-dark: #06b6d4;
    --c-cyan-deep: #0284c7;
    --c-sky: #7dd3fc;
    --c-purple: #8b5cf6;
    --c-purple-light: #a78bfa;
    --c-pink: #ec4899;
    --c-pink-accent: #f472b6;
    --c-indigo: #6366f1;
    --c-indigo-light: #818cf8;

    /* RAMP — neutral slate scale. Collapses the many near-duplicate
       greys found in the audit (#0f172a / #334155 / #475569 / #64748b
       / #94a3b8 / #cbd5e1 / #e2e8f0 / #f1f5f9). */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --white: #ffffff;

    /* GRADIENT helpers (composed from brand tokens) */
    --hero-gradient: linear-gradient(135deg, var(--primary-light), var(--accent), #f472b6);
    --cyan-cyan-gradient: linear-gradient(135deg, #0ea5e9, #06b6d4);
    --grad-indigo-purple: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --grad-indigo-purple-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

    /* STATE TINTS — translucent overlays for hover/active/selected states.
       Theme-independent: these hold the exact literal values currently
       hardcoded across the app, so referencing them is a visual no-op.
       To recolor hover/selection accents, change these in one place. */
    --tint-cyan-weak:   rgba(14, 165, 233, 0.04);
    --tint-cyan-soft:   rgba(14, 165, 233, 0.08);
    --tint-cyan-faint:  rgba(14, 165, 233, 0.03);
    --tint-cyan-strong: rgba(14, 165, 233, 0.30);
    --tint-cyan-glow:   rgba(14, 165, 233, 0.40);
    --tint-blue-weak:   rgba(59, 130, 246, 0.04);
    --tint-green-lift:  rgba(16, 185, 129, 0.35);
    --tint-red-weak:    rgba(239, 68, 68, 0.08);
    --tint-red-soft:    rgba(239, 68, 68, 0.20);
    --tint-indigo-glow: rgba(99, 102, 241, 0.42);
    --tint-slate-dark:  rgba(30, 41, 59, 0.60);

    /* CHROME + WELCOME — large always-visible surfaces (sidebar, top
       header, welcome/intro page). Defaults here match today's hardcoded
       values so light/dark are a VISUAL NO-OP. The shark/fusion theme
       blocks override these to recolor the app chrome end-to-end. */
    --chrome-sidebar: linear-gradient(180deg, rgba(15,23,42,0.97) 0%, rgba(30,41,59,0.95) 50%, rgba(15,23,42,0.97) 100%);
    --chrome-header:  linear-gradient(180deg, rgba(15,23,42,0.97) 0%, rgba(30,41,59,0.95) 100%);
    --welcome-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56,189,248,0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(139,92,246,0.10) 0%, transparent 60%), linear-gradient(180deg, #0a0e1a 0%, #060912 100%);
    --welcome-orb-1: radial-gradient(circle, rgba(56,189,248,0.18), transparent 70%);
    --welcome-orb-2: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%);
    --welcome-hero-bg: linear-gradient(180deg, rgba(15,23,42,0.65) 0%, rgba(2,6,23,0.75) 100%);

    /* 3D Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-md: 0 8px 16px -4px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.1), 0 8px 10px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.12), 0 10px 16px -6px rgba(0,0,0,0.06);
    --shadow-3d: 0 1px 1px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.04);
    --shadow-3d-hover: 0 1px 1px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.06), 0 16px 32px rgba(0,0,0,0.06), 0 32px 64px rgba(0,0,0,0.06);

    /* Border Radius */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Sidebar Dimensions */
    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;
    --banner-height: 38px;
}


/* ============================================================
   PREMIUM SKINS  [THEME_PREMIUM_2026_06_06]
   Selectable via the theme chooser (theme-switcher.js).

   HOW THEY WORK (important):
   Luxe + Fusion are DARK-FAMILY skins. The switcher sets
   data-theme="dark" (so the app inherits ALL the dark-theme
   component repaint rules — cards, tables, dashboards, modals)
   AND data-skin="luxe|fusion". These [data-skin] blocks come
   AFTER the dark token block, so they win the specificity tie
   and re-tint the dark UI with their own brand + background
   hues. Net effect: full dark repaint + unique accent identity.
   ============================================================ */

/* ---------- LUXE — deep navy-teal + metallic gold ---------- */
[data-skin="luxe"] {
  /* BRAND (gold-forward) */
  --primary: #d4af37;
  --primary-dark: #b8860b;
  --primary-light: #f3d98b;
  --primary-gradient: linear-gradient(135deg, #d4af37 0%, #f3d98b 100%);
  --accent: #5eead4;
  --accent-light: #99f6e4;
  /* SURFACE */
  --bg-main: radial-gradient(ellipse 100% 70% at 50% 0%, #0c2a3a 0%, #061620 55%, #03101a 100%);
  --bg-card: rgba(12, 42, 58, 0.62);
  --bg-secondary: #082030;
  --card-bg: #0a2330;
  --input-bg: #0a2330;
  --card-border: rgba(212, 175, 55, 0.18);
  --card-outline: rgba(212, 175, 55, 0.18);
  --sidebar-bg: linear-gradient(180deg, #082030 0%, #03101a 100%);
  --sidebar-dark: #03101a;
  --sidebar-light: #082030;
  /* LINE */
  --border: rgba(212, 175, 55, 0.18);
  --border-light: rgba(212, 175, 55, 0.10);
  /* TEXT */
  --text-primary: #fbf3da;
  --text-secondary: #c5d3dd;
  --text-muted: #9fb6c4;
  --text-inverse: #06151f;
  --theme-name: 'Luxe';
  /* GRADIENTS */
  --hero-gradient: linear-gradient(135deg, #d4af37, #f3d98b, #5eead4);
  --primary-gradient: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  /* BRAND PALETTE remap — gold/teal replace cyan/purple accents */
  --c-cyan: #d4af37;        --c-cyan-light: #f3d98b;  --c-cyan-dark: #b8860b;
  --c-cyan-deep: #9a7d1f;   --c-sky: #f6e3a8;
  --c-purple: #5eead4;      --c-purple-light: #99f6e4;
  --c-pink: #fb923c;        --c-pink-accent: #fdba74;
  --c-indigo: #d4af37;      --c-indigo-light: #f3d98b;
  /* STATE TINTS retuned to gold/teal */
  --tint-cyan-weak: rgba(212,175,55,0.06);
  --tint-cyan-soft: rgba(212,175,55,0.12);
  --tint-cyan-faint: rgba(212,175,55,0.05);
  --tint-cyan-strong: rgba(212,175,55,0.30);
  --tint-cyan-glow: rgba(212,175,55,0.40);
  --tint-blue-weak: rgba(94,234,212,0.06);
  --tint-indigo-glow: rgba(212,175,55,0.42);
  --grad-indigo-purple: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  --grad-indigo-purple-hover: linear-gradient(135deg, #f3d98b 0%, #d4af37 100%);
  /* CHROME + WELCOME — navy-teal shell, gold/teal aurora */
  --chrome-sidebar: linear-gradient(180deg, rgba(8,32,48,0.97) 0%, rgba(3,16,26,0.98) 50%, rgba(6,24,36,0.97) 100%);
  --chrome-header:  linear-gradient(180deg, rgba(8,32,48,0.97) 0%, rgba(6,22,32,0.96) 100%);
  --welcome-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(94,234,212,0.10) 0%, transparent 60%), linear-gradient(180deg, #061620 0%, #03101a 100%);
  --welcome-orb-1: radial-gradient(circle, rgba(212,175,55,0.20), transparent 70%);
  --welcome-orb-2: radial-gradient(circle, rgba(94,234,212,0.16), transparent 70%);
  --welcome-hero-bg: linear-gradient(180deg, rgba(10,35,48,0.65) 0%, rgba(3,16,26,0.78) 100%);
}

/* ---------- FUSION — navy-teal base + Aurora violet/cyan + gold spark ---------- */
[data-skin="fusion"] {
  /* BRAND (cyan→violet identity, gold highlight) */
  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --primary-light: #7dd3fc;
  --primary-gradient: linear-gradient(135deg, #38bdf8 0%, #8b5cf6 100%);
  --accent: #a78bfa;
  --accent-light: #c4b5fd;
  --gold: #f5c451;
  --gold-light: #ffd97a;
  /* SURFACE */
  --bg-main: radial-gradient(ellipse 100% 75% at 50% 0%, #102a44 0%, #0a1730 55%, #050b1a 100%);
  --bg-card: rgba(18, 36, 64, 0.62);
  --bg-secondary: #0e2038;
  --card-bg: #0e2038;
  --input-bg: #0e2038;
  --card-border: rgba(124, 138, 255, 0.18);
  --card-outline: rgba(124, 138, 255, 0.18);
  --sidebar-bg: linear-gradient(180deg, #0c1f3a 0%, #050b1a 100%);
  --sidebar-dark: #050b1a;
  --sidebar-light: #0c1f3a;
  /* LINE */
  --border: rgba(124, 138, 255, 0.18);
  --border-light: rgba(124, 138, 255, 0.10);
  /* TEXT */
  --text-primary: #eaf2ff;
  --text-secondary: #b7c7e0;
  --text-muted: #8499b8;
  --text-inverse: #050b1a;
  --theme-name: 'Fusion';
  /* GRADIENTS — the fusion signature: cyan → violet → gold */
  --hero-gradient: linear-gradient(135deg, #38bdf8, #a78bfa, #f5c451);
  /* BRAND PALETTE remap — Aurora hues */
  --c-cyan: #38bdf8;        --c-cyan-light: #7dd3fc;  --c-cyan-dark: #22d3ee;
  --c-cyan-deep: #0ea5e9;   --c-sky: #bae6fd;
  --c-purple: #a78bfa;      --c-purple-light: #c4b5fd;
  --c-pink: #f472b6;        --c-pink-accent: #f9a8d4;
  --c-indigo: #818cf8;      --c-indigo-light: #a5b4fc;
  /* STATE TINTS retuned to cyan/violet */
  --tint-cyan-weak: rgba(56,189,248,0.06);
  --tint-cyan-soft: rgba(56,189,248,0.12);
  --tint-cyan-faint: rgba(56,189,248,0.05);
  --tint-cyan-strong: rgba(56,189,248,0.32);
  --tint-cyan-glow: rgba(56,189,248,0.42);
  --tint-blue-weak: rgba(139,92,246,0.07);
  --tint-indigo-glow: rgba(139,92,246,0.45);
  --grad-indigo-purple: linear-gradient(135deg, #38bdf8 0%, #8b5cf6 100%);
  --grad-indigo-purple-hover: linear-gradient(135deg, #7dd3fc 0%, #a78bfa 100%);
  /* CHROME + WELCOME — navy shell, aurora cyan/violet */
  --chrome-sidebar: linear-gradient(180deg, rgba(12,31,58,0.97) 0%, rgba(5,11,26,0.98) 50%, rgba(10,23,48,0.97) 100%);
  --chrome-header:  linear-gradient(180deg, rgba(12,31,58,0.97) 0%, rgba(8,18,40,0.96) 100%);
  --welcome-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56,189,248,0.16) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(167,139,250,0.14) 0%, transparent 60%), linear-gradient(180deg, #0a1730 0%, #050b1a 100%);
  --welcome-orb-1: radial-gradient(circle, rgba(56,189,248,0.20), transparent 70%);
  --welcome-orb-2: radial-gradient(circle, rgba(167,139,250,0.20), transparent 70%);
  --welcome-hero-bg: linear-gradient(180deg, rgba(18,36,64,0.65) 0%, rgba(5,11,26,0.78) 100%);
}