/* ============================================================================
   Design theme presets — the platform's colour/style layer.

   Every component stylesheet (main.css, admin.css) reads
   *semantic* tokens only: --bg-main, --bg-card, --border-color, --text-main,
   --primary… A preset is therefore a data change: adding one means adding a block
   here, never editing a component.

   The attribute lives on any element, so a whole page opts in with
   <html data-theme="flat-light"> and a single block inside it can opt out with
   <div data-theme="neo-brutalist"> — which is exactly how the landing page's live
   style switcher previews a preset.

   Keep these values in sync with app/services/theme_presets.py: the renderer feeds
   the same palette to real client sites, and tests/test_theme_presets.py fails if the
   two drift apart. */

/* --- Theme A: flat-light — the platform default. Modern flat design: no glows, no
   blur, crisp hairline borders, one vibrant blue. ------------------------------------ */
:root,
[data-theme="flat-light"] {
  --bg-main: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --overlay-weak: rgba(15, 23, 42, .04);
  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-width: 1px;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #DBEAFE;
  --on-primary: #FFFFFF;
  --secondary: #10B981;
  --secondary-soft: #D1FAE5;
  --on-secondary: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --hero-glow: transparent;
  --shadow-flat: none;
  --shadow-flat-hover: 0 2px 0 0 #CBD5E1;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* --- Theme B: dark-bold — the Apex Detailing showcase: near-black, cyan accent. ----- */
[data-theme="dark-bold"] {
  --bg-main: #0F1117;
  --bg-card: #181B23;
  --bg-card-hover: #1F232D;
  --bg-elevated: #1B1F28;
  --bg-subtle: #141821;
  --overlay-weak: rgba(255, 255, 255, .06);
  --border-color: #2A2F3D;
  --border-strong: #3B4252;
  --border-width: 1px;
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --primary: #38BDF8;
  --primary-hover: #0284C7;
  --primary-soft: rgba(56, 189, 248, .14);
  --on-primary: #06131F;
  --secondary: #E11D48;
  --secondary-soft: rgba(225, 29, 72, .16);
  --on-secondary: #FFFFFF;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --hero-glow: rgba(56, 189, 248, .22);
  --shadow-flat: none;
  --shadow-flat-hover: 0 0 0 1px #3B4252;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* --- Theme C: minimal-warm — bakery / local services: off-white, warm amber. -------- */
[data-theme="minimal-warm"] {
  --bg-main: #FAF8F5;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F1EA;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F5F1EA;
  --overlay-weak: rgba(28, 25, 23, .04);
  --border-color: #E5E0D8;
  --border-strong: #D6CFC3;
  --border-width: 1px;
  --text-main: #1C1917;
  --text-muted: #78716C;
  --text-dim: #A8A29E;
  --primary: #D97706;
  --primary-hover: #B45309;
  --primary-soft: #FEF3C7;
  --on-primary: #FFFFFF;
  --secondary: #0F766E;
  --secondary-soft: #CCFBF1;
  --on-secondary: #FFFFFF;
  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;
  --hero-glow: transparent;
  --shadow-flat: none;
  --shadow-flat-hover: 0 2px 0 0 #E5E0D8;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* --- Theme D: neo-brutalist — creative / high energy: thick black rules, hard
   offset shadows, near-square corners. --------------------------------------------- */
[data-theme="neo-brutalist"] {
  --bg-main: #FFFBEB;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFF7D6;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #FEF3C7;
  --overlay-weak: rgba(0, 0, 0, .05);
  --border-color: #000000;
  --border-strong: #000000;
  --border-width: 3px;
  --text-main: #000000;
  --text-muted: #374151;
  --text-dim: #4B5563;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #DBEAFE;
  --on-primary: #FFFFFF;
  --secondary: #FF0055;
  --secondary-soft: #FFE4EC;
  --on-secondary: #FFFFFF;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --hero-glow: transparent;
  --shadow-flat: 4px 4px 0 #000000;
  --shadow-flat-hover: 6px 6px 0 #000000;
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 6px;
  --radius-full: 4px;
}

/* --- Derived aliases -----------------------------------------------------------------
   The older component stylesheets were written against purpose-named tokens
   (--bg-deep, --surface-card, --accent-a…). Rather than rewrite them all, the presets
   publish those names as aliases of the semantic ones above. Because the aliases are
   var() references resolved on the themed element, one block serves every preset. */
[data-theme] {
  --radius-md: var(--radius);
  --bg-deep: var(--bg-main);
  --bg-surface: var(--bg-card);
  --bg-surface-elevated: var(--bg-elevated);
  --surface-card: var(--bg-card);
  --surface-strong: var(--bg-elevated);
  --surface-input: var(--bg-card);
  --border-subtle: var(--border-color);
  --border-active: var(--border-strong);
  --accent-a: var(--primary);
  --accent-b: var(--secondary);
  --accent-soft: var(--primary-soft);
  --accent-line: var(--border-color);
  --on-accent: var(--on-primary);
  --on-accent-text: var(--on-primary);
  --card-shadow: var(--shadow-flat);
  --input-bg: var(--bg-card);
  --input-text: var(--text-main);
  --input-border: var(--border-color);
}

/* Platform accents, kept for the components that still reference the older names
   (the admin panel loads variables.css instead and is unaffected). */
[data-theme] {
  --accent-electric: var(--primary);
  --accent-cyan: var(--secondary);
  --accent-purple: var(--secondary);
  --grad-deep: var(--primary);
  --grad-brand: var(--primary);
  --glow-blue: var(--shadow-flat);
  --glass-bg: var(--bg-card);
  --glass-blur: none;
  --status-success: var(--success);
  --status-warning: var(--warning);
  --status-danger: var(--danger);
}