/* ============================================================================
   ShopKit — Theme System
   ----------------------------------------------------------------------------
   Swap any palette by changing the <body> class to one of:
       theme-emerald    (default — fresh, premium green)
       theme-midnight   (deep blue, luxury tech vibe)
       theme-sunset     (warm orange + rose, lifestyle)
       theme-ocean      (teal + cyan, fashion + beauty)
       theme-royal      (regal purple + gold, jewelry)
       theme-mono       (monochrome black + white, editorial / fashion)

   Each palette overrides the same set of variables, so every component picks
   up the new colors automatically.
   ============================================================================ */

:root {
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Inter', var(--font-sans);

    /* Spacing & radii */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, .08);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, .10);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .14);

    /* Layout */
    --container: 1280px;
    --header-h: 72px;

    /* Easing */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Neutral scale (shared across themes) */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Status colors (consistent across palettes) */
    --success: #16a34a;
    --success-bg: #dcfce7;
    --warning: #d97706;
    --warning-bg: #fef3c7;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --info: #2563eb;
    --info-bg: #dbeafe;
}

/* ============================================================================
   PALETTE — EMERALD  (default)
   ============================================================================ */
.theme-emerald {
    --primary:        #0f766e;
    --primary-hover:  #0d5e58;
    --primary-light:  #ccfbf1;
    --primary-soft:   #f0fdfa;
    --primary-fg:     #ffffff;
    --accent:         #f59e0b;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #f8fafc;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(15, 118, 110, .04);
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;

    --text:           #0f172a;
    --text-muted:     #475569;
    --text-soft:      #64748b;
    --link:           #0f766e;

    --hero-gradient:  linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 60%, #99f6e4 100%);
    --hero-accent:    linear-gradient(135deg, #0f766e, #14b8a6);
}

/* ============================================================================
   PALETTE — MIDNIGHT
   ============================================================================ */
.theme-midnight {
    --primary:        #1e293b;
    --primary-hover:  #0f172a;
    --primary-light:  #cbd5e1;
    --primary-soft:   #f1f5f9;
    --primary-fg:     #ffffff;
    --accent:         #f97316;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #f8fafc;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(30, 41, 59, .04);
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;

    --text:           #0f172a;
    --text-muted:     #475569;
    --text-soft:      #64748b;
    --link:           #1e293b;

    --hero-gradient:  linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 60%, #94a3b8 100%);
    --hero-accent:    linear-gradient(135deg, #1e293b, #475569);
}

/* ============================================================================
   PALETTE — SUNSET
   ============================================================================ */
.theme-sunset {
    --primary:        #ea580c;
    --primary-hover:  #c2410c;
    --primary-light:  #fed7aa;
    --primary-soft:   #fff7ed;
    --primary-fg:     #ffffff;
    --accent:         #be185d;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #fffbf5;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(234, 88, 12, .04);
    --border:         #fde4d3;
    --border-strong:  #fdba74;

    --text:           #1c1917;
    --text-muted:     #57534e;
    --text-soft:      #78716c;
    --link:           #c2410c;

    --hero-gradient:  linear-gradient(135deg, #fff7ed 0%, #fed7aa 60%, #fdba74 100%);
    --hero-accent:    linear-gradient(135deg, #ea580c, #f97316);
}

/* ============================================================================
   PALETTE — OCEAN
   ============================================================================ */
.theme-ocean {
    --primary:        #0891b2;
    --primary-hover:  #0e7490;
    --primary-light:  #cffafe;
    --primary-soft:   #ecfeff;
    --primary-fg:     #ffffff;
    --accent:         #db2777;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #f0fdff;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(8, 145, 178, .04);
    --border:         #e0f2fe;
    --border-strong:  #bae6fd;

    --text:           #0c4a6e;
    --text-muted:     #475569;
    --text-soft:      #64748b;
    --link:           #0e7490;

    --hero-gradient:  linear-gradient(135deg, #ecfeff 0%, #cffafe 60%, #67e8f9 100%);
    --hero-accent:    linear-gradient(135deg, #0891b2, #06b6d4);
}

/* ============================================================================
   PALETTE — ROYAL
   ============================================================================ */
.theme-royal {
    --primary:        #6d28d9;
    --primary-hover:  #5b21b6;
    --primary-light:  #ddd6fe;
    --primary-soft:   #f5f3ff;
    --primary-fg:     #ffffff;
    --accent:         #d97706;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #faf9ff;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(109, 40, 217, .04);
    --border:         #ede9fe;
    --border-strong:  #c4b5fd;

    --text:           #1e1b4b;
    --text-muted:     #4c1d95;
    --text-soft:      #6b7280;
    --link:           #6d28d9;

    --hero-gradient:  linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 60%, #a78bfa 100%);
    --hero-accent:    linear-gradient(135deg, #6d28d9, #8b5cf6);
}

/* ============================================================================
   PALETTE — MONO (editorial black & white)
   ============================================================================ */
.theme-mono {
    --primary:        #0f172a;
    --primary-hover:  #000000;
    --primary-light:  #e2e8f0;
    --primary-soft:   #f8fafc;
    --primary-fg:     #ffffff;
    --accent:         #dc2626;
    --accent-fg:      #ffffff;

    --bg:             #ffffff;
    --bg-soft:        #f8fafc;
    --bg-card:        #ffffff;
    --bg-overlay:     rgba(15, 23, 42, .04);
    --border:         #e2e8f0;
    --border-strong:  #94a3b8;

    --text:           #0f172a;
    --text-muted:     #475569;
    --text-soft:      #64748b;
    --link:           #0f172a;

    --hero-gradient:  linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #cbd5e1 100%);
    --hero-accent:    linear-gradient(135deg, #0f172a, #475569);
}

/* ============================================================================
   Optional dark-mode override — append .dark to any theme class to enable.
   e.g. <body class="theme-emerald dark">
   ============================================================================ */
.dark {
    --bg:             #0b1220;
    --bg-soft:        #0f172a;
    --bg-card:        #111c30;
    --border:         #1f2a44;
    --border-strong:  #334155;
    --text:           #f1f5f9;
    --text-muted:     #cbd5e1;
    --text-soft:      #94a3b8;
}