/* ========================================================
   Design Tokens — Per-Demo Theming System
   Each demo gets a purpose-built palette, typography,
   spacing, shadows, and interactive states.

   Activated via [data-demo="<id>"] on .app-frame
   ======================================================== */

/* Google Fonts loaded via <link> in index.html */

/* --------------------------------------------------------
   GLOBAL FOUNDATIONS
   Shared across all demos — structural tokens only
   -------------------------------------------------------- */
:root {
  /* --- Spacing Scale (4px base) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-11: 2.75rem;  /* 44px */
  --space-12: 3rem;     /* 48px */

  /* --- Container --- */
  --container-max-width: 720px;
  --grid-gap: 1rem;

  /* --- Transition Timing --- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Breakpoints (for reference, used in media queries) --- */
  /* --bp-sm: 640px */
  /* --bp-md: 768px */
  /* --bp-lg: 1024px */
  /* --bp-xl: 1280px */

  /* --- Typography Scale (fluid with clamp) --- */
  --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --font-size-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --font-size-3xl: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  --font-size-4xl: clamp(2rem, 1.7rem + 1.1vw, 2.75rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-wide: 0.02em;
}

/* ================================================================
   DEMO 1: MARCUS FITNESS — Personal Trainer
   Bold energetic fitness: charcoal + electric green, geometric
   ================================================================ */
:root,
[data-demo="marcus"] {
  --font-family-heading: 'Oswald', system-ui, sans-serif;
  --font-family-body: 'Inter', system-ui, sans-serif;

  --color-primary: #0a6b43;
  --color-primary-light: #10b981;
  --color-primary-dark: #064e31;
  --color-secondary: #f59e0b;
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #e5e7eb;

  --radius-sm: 0.125rem;  /* 2px — sharp geometric */
  --radius-md: 0.25rem;   /* 4px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
}

/* ================================================================
   DEMO 2: LUCAS AI — Media Buyer
   Professional data-driven: slate + cobalt blue, clean cards
   ================================================================ */
[data-demo="lucas"] {
  --font-family-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-family-body: 'Outfit', system-ui, sans-serif;

  --color-primary: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e3a8a;
  --color-secondary: #10b981;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-on-primary: #ffffff;
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-error: #dc2626;
  --color-border: #e2e8f0;

  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 20px -5px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* ================================================================
   DEMO 3: ALEX RIVERA — Mindset Coach
   Warm approachable: soft amber/terracotta + gentle warmth
   ================================================================ */
[data-demo="alex"] {
  --font-family-heading: 'Poppins', system-ui, sans-serif;
  --font-family-body: 'Merriweather', Georgia, serif;

  --color-primary: #b45309;
  --color-primary-light: #d97706;
  --color-primary-dark: #92400e;
  --color-secondary: #7c3aed;
  --color-background: #fffbf5;
  --color-surface: #fef7ed;
  --color-text-primary: #292524;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-error: #dc2626;
  --color-border: #e7e5e4;

  --radius-sm: 0.5rem;    /* 8px — soft rounded */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2rem;     /* 32px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(180, 83, 9, 0.06);
  --shadow-md: 0 6px 16px -4px rgba(180, 83, 9, 0.08), 0 2px 6px -2px rgba(180, 83, 9, 0.04);
  --shadow-lg: 0 16px 32px -8px rgba(180, 83, 9, 0.1), 0 4px 8px -4px rgba(180, 83, 9, 0.04);
}

/* ================================================================
   DEMO 4: NATHAN CROSS — Business Operations
   Corporate trustworthy: deep navy + steel blue, structured
   ================================================================ */
[data-demo="nathan"] {
  --font-family-heading: 'Cormorant Garamond', Georgia, serif;
  --font-family-body: 'IBM Plex Sans', system-ui, sans-serif;

  --color-primary: #1e3a5f;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #172554;
  --color-secondary: #0ea5e9;
  --color-background: #f1f5f9;
  --color-surface: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #cbd5e1;

  --radius-sm: 0.25rem;   /* 4px — crisp corporate */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 2px 8px -2px rgba(15, 23, 42, 0.12), 0 1px 3px -1px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 24px -6px rgba(15, 23, 42, 0.15), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
}

/* ================================================================
   DEMO 5: MIKE AI — Copywriting AI
   Creative bold: rich magenta/fuchsia + vibrant energy
   ================================================================ */
[data-demo="mike"] {
  --font-family-heading: 'Sora', system-ui, sans-serif;
  --font-family-body: 'Karla', system-ui, sans-serif;

  --color-primary: #a21caf;
  --color-primary-light: #d946ef;
  --color-primary-dark: #86198f;
  --color-secondary: #f59e0b;
  --color-background: #fdf4ff;
  --color-surface: #fae8ff;
  --color-text-primary: #1e1b4b;
  --color-text-secondary: #6b7280;
  --color-text-on-primary: #ffffff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #e11d48;
  --color-border: #f0abfc;

  --radius-sm: 0.75rem;   /* 12px — playful rounded */
  --radius-md: 1rem;      /* 16px */
  --radius-lg: 1.25rem;   /* 20px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2rem;     /* 32px */
  --radius-full: 999px;

  --shadow-sm: 2px 2px 0px rgba(162, 28, 175, 0.08);
  --shadow-md: 3px 3px 0px rgba(162, 28, 175, 0.1), 1px 1px 0px rgba(162, 28, 175, 0.06);
  --shadow-lg: 5px 5px 0px rgba(162, 28, 175, 0.12), 2px 2px 0px rgba(162, 28, 175, 0.06);
}

/* ================================================================
   DEMO 6: COACH FLEX — Personal Trainer (alt)
   High-energy fitness: vivid orange + dark slate, punchy
   ================================================================ */
[data-demo="trainer"] {
  --font-family-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-family-body: 'DM Sans', system-ui, sans-serif;

  --color-primary: #ea580c;
  --color-primary-light: #fb923c;
  --color-primary-dark: #c2410c;
  --color-secondary: #0d9488;
  --color-background: #f5f1ee;
  --color-surface: #faf7f5;
  --color-text-primary: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #22c55e;
  --color-warning: #ca8a04;
  --color-error: #ef4444;
  --color-border: #e7e5e4;

  --radius-sm: 0.25rem;   /* 4px — modern angular */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.625rem;  /* 10px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 999px;

  --shadow-sm: 0 2px 4px rgba(234, 88, 12, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.05);
  --shadow-lg: 0 8px 24px -4px rgba(234, 88, 12, 0.13), 0 4px 8px rgba(234, 88, 12, 0.06);
}

/* ================================================================
   DEMO 7: NEXUS AI — Business Consultant
   Executive polish: charcoal + teal accent, minimal
   ================================================================ */
[data-demo="bizconsult"] {
  --font-family-heading: 'Fraunces', Georgia, serif;
  --font-family-body: 'Commissioner', system-ui, sans-serif;

  --color-primary: #115e59;
  --color-primary-light: #14b8a6;
  --color-primary-dark: #0f4c47;
  --color-secondary: #6366f1;
  --color-background: #f0fdfa;
  --color-surface: #ffffff;
  --color-text-primary: #0c3c38;
  --color-text-secondary: #5a7a76;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #99f6e4;

  --radius-sm: 0.1875rem;  /* 3px — refined minimal */
  --radius-md: 0.3125rem;  /* 5px */
  --radius-lg: 0.4375rem;  /* 7px */
  --radius-xl: 0.625rem;   /* 10px */
  --radius-2xl: 0.875rem;  /* 14px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 94, 89, 0.05);
  --shadow-md: 0 3px 10px -3px rgba(17, 94, 89, 0.08), 0 1px 3px -1px rgba(17, 94, 89, 0.04);
  --shadow-lg: 0 10px 30px -8px rgba(17, 94, 89, 0.1), 0 3px 8px -3px rgba(17, 94, 89, 0.05);
}

/* ================================================================
   DEMO 8: SAGE AI — Mindset & Relationship Coach
   Spiritual calming: deep violet + lavender mist, soft dreamy
   ================================================================ */
[data-demo="mindset"] {
  --font-family-heading: 'DM Sans', system-ui, sans-serif;
  --font-family-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

  --color-primary: #6d28d9;
  --color-primary-light: #a78bfa;
  --color-primary-dark: #5b21b6;
  --color-secondary: #ec4899;
  --color-background: #faf5ff;
  --color-surface: #f3e8ff;
  --color-text-primary: #1e1b4b;
  --color-text-secondary: #7c7399;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #ddd6fe;

  --radius-sm: 0.625rem;   /* 10px — very soft */
  --radius-md: 0.875rem;   /* 14px */
  --radius-lg: 1.25rem;    /* 20px */
  --radius-xl: 1.75rem;    /* 28px */
  --radius-2xl: 2.5rem;    /* 40px */
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(109, 40, 217, 0.06);
  --shadow-md: 0 6px 20px -4px rgba(109, 40, 217, 0.1), 0 2px 8px -2px rgba(109, 40, 217, 0.05);
  --shadow-lg: 0 16px 40px -8px rgba(109, 40, 217, 0.12), 0 6px 12px -4px rgba(109, 40, 217, 0.06);
}

/* ================================================================
   DEMO 9: CLOSER AI — Sales Call Coach
   High-energy sales: crimson red + charcoal, bold sharp
   ================================================================ */
[data-demo="salescoach"] {
  --font-family-heading: 'Bitter', Georgia, serif;
  --font-family-body: 'Open Sans', system-ui, sans-serif;

  --color-primary: #b91c1c;
  --color-primary-light: #ef4444;
  --color-primary-dark: #991b1b;
  --color-secondary: #f97316;
  --color-background: #fef2f2;
  --color-surface: #ffffff;
  --color-text-primary: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #15803d;
  --color-warning: #ca8a04;
  --color-error: #b91c1c;
  --color-border: #fecaca;

  --radius-sm: 0.1875rem;  /* 3px — sharp aggressive */
  --radius-md: 0.25rem;    /* 4px */
  --radius-lg: 0.375rem;   /* 6px */
  --radius-xl: 0.5rem;     /* 8px */
  --radius-2xl: 0.75rem;   /* 12px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(185, 28, 28, 0.06), 2px 0 0 rgba(185, 28, 28, 0.03);
  --shadow-md: 0 4px 8px -2px rgba(185, 28, 28, 0.1), 3px 0 0 rgba(185, 28, 28, 0.04);
  --shadow-lg: 0 8px 20px -4px rgba(185, 28, 28, 0.14), 4px 0 0 rgba(185, 28, 28, 0.05);
}

/* --- Closer AI: Dark Mode --- */
.app-frame[data-demo="salescoach"] {
  --white: #141414;
  --black: #f5f5f5;

  /* Neutral scale — dark variants */
  --neutral-50: #1f1f1f;
  --neutral-200: #333333;
  --neutral-300: #404040;
  --neutral-500: #a3a3a3;
  --neutral-700: #d4d4d4;

  /* Invert alpha channels */
  --alpha-light-25: rgba(255, 255, 255, 0.04);
  --alpha-light-50: rgba(255, 255, 255, 0.06);
  --alpha-light-100: rgba(255, 255, 255, 0.09);
  --alpha-light-200: rgba(255, 255, 255, 0.20);
  --alpha-light-300: rgba(255, 255, 255, 0.28);
  --alpha-light-400: rgba(255, 255, 255, 0.36);
  --alpha-light-500: rgba(255, 255, 255, 0.48);
  --alpha-light-600: rgba(255, 255, 255, 0.60);
  --alpha-light-900: rgba(255, 255, 255, 0.80);

  --alpha-dark-300: rgba(255, 255, 255, 0.08);
  --alpha-dark-600: rgba(255, 255, 255, 0.12);
  --alpha-dark-800: rgba(0, 0, 0, 0.40);
  --alpha-dark-900: rgba(0, 0, 0, 0.50);

  /* Design tokens — dark variants */
  --color-primary: #ef4444;
  --color-primary-light: #f87171;
  --color-primary-dark: #dc2626;
  --color-secondary: #fb923c;
  --color-background: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a3a3a3;
  --color-text-on-primary: #ffffff;
  --color-success: #22c55e;
  --color-warning: #facc15;
  --color-error: #f87171;
  --color-border: rgba(255, 255, 255, 0.10);

  /* Shadows — softer on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 20px -4px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);

  --sidebar-tint: rgba(239, 68, 68, 0.06);
}

/* ================================================================
   DEMO 10: PROPVAL AI — Real Estate CMA Expert
   Sophisticated editorial: warm cyan + ivory neutrals
   ================================================================ */
[data-demo="realestate"] {
  --font-family-heading: 'Playfair Display', Georgia, serif;
  --font-family-body: 'Lato', system-ui, sans-serif;

  --color-primary: #0e7490;
  --color-primary-light: #22d3ee;
  --color-primary-dark: #155e75;
  --color-secondary: #92400e;
  --color-background: #fefce8;
  --color-surface: #fffef5;
  --color-text-primary: #164e63;
  --color-text-secondary: #6b7280;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #a5f3fc;

  --radius-sm: 0.125rem;   /* 2px — editorial crisp */
  --radius-md: 0.1875rem;  /* 3px */
  --radius-lg: 0.3125rem;  /* 5px */
  --radius-xl: 0.5rem;     /* 8px */
  --radius-2xl: 0.75rem;   /* 12px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(14, 116, 144, 0.04);
  --shadow-md: 0 2px 6px -1px rgba(14, 116, 144, 0.06), 0 1px 2px rgba(14, 116, 144, 0.03);
  --shadow-lg: 0 6px 16px -4px rgba(14, 116, 144, 0.08), 0 2px 4px rgba(14, 116, 144, 0.04);
}

/* ================================================================
   DEMO 11: DEALFLOW AI — Transaction Coordinator
   Organized reliable: steel blue/slate + structured clean
   ================================================================ */
[data-demo="txcoord"] {
  --font-family-heading: 'Work Sans', system-ui, sans-serif;
  --font-family-body: 'Libre Franklin', system-ui, sans-serif;

  --color-primary: #475569;
  --color-primary-light: #94a3b8;
  --color-primary-dark: #334155;
  --color-secondary: #0891b2;
  --color-background: #f4f6f7;
  --color-surface: #edf0f2;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #e2e8f0;

  --radius-sm: 0.3125rem;  /* 5px — functional clean */
  --radius-md: 0.4375rem;  /* 7px */
  --radius-lg: 0.625rem;   /* 10px */
  --radius-xl: 0.875rem;   /* 14px */
  --radius-2xl: 1.125rem;  /* 18px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(71, 85, 105, 0.06);
  --shadow-md: 0 3px 6px -1px rgba(71, 85, 105, 0.08), 0 1px 3px rgba(71, 85, 105, 0.04);
  --shadow-lg: 0 8px 16px -3px rgba(71, 85, 105, 0.1), 0 3px 6px rgba(71, 85, 105, 0.05);
}

/* ================================================================
   DEMO 12: LEADIQ AI — Executive Leadership Coach
   Authoritative refined: deep indigo + muted gold accent
   ================================================================ */
[data-demo="executive"] {
  --font-family-heading: 'EB Garamond', Georgia, serif;
  --font-family-body: 'Noto Sans', system-ui, sans-serif;

  --color-primary: #3730a3;
  --color-primary-light: #6366f1;
  --color-primary-dark: #312e81;
  --color-secondary: #b45309;
  --color-background: #eef2ff;
  --color-surface: #e0e7ff;
  --color-text-primary: #1e1b4b;
  --color-text-secondary: #6366f1;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #c7d2fe;

  --radius-sm: 0.1875rem;  /* 3px — stately refined */
  --radius-md: 0.25rem;    /* 4px */
  --radius-lg: 0.4375rem;  /* 7px */
  --radius-xl: 0.5625rem;  /* 9px */
  --radius-2xl: 0.8125rem; /* 13px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(55, 48, 163, 0.05);
  --shadow-md: 0 4px 12px -3px rgba(55, 48, 163, 0.08), 0 1px 4px -1px rgba(55, 48, 163, 0.04);
  --shadow-lg: 0 12px 28px -6px rgba(55, 48, 163, 0.1), 0 4px 10px -3px rgba(55, 48, 163, 0.05);
}

/* ================================================================
   DEMO 13: WEALTHIQ AI — Financial Coach
   Trust stability: rich gold-brown + dark accents, conservative banking
   ================================================================ */
[data-demo="finance"] {
  --font-family-heading: 'Crimson Pro', Georgia, serif;
  --font-family-body: 'Public Sans', system-ui, sans-serif;

  --color-primary: #854d0e;
  --color-primary-light: #ca8a04;
  --color-primary-dark: #713f12;
  --color-secondary: #1e3a5f;
  --color-background: #fefdf8;
  --color-surface: #fef9ee;
  --color-text-primary: #422006;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #15803d;
  --color-warning: #ca8a04;
  --color-error: #dc2626;
  --color-border: #d4d4c8;

  --radius-sm: 0.25rem;    /* 4px — conservative banking */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.625rem;   /* 10px */
  --radius-2xl: 0.875rem;  /* 14px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(133, 77, 14, 0.05);
  --shadow-md: 0 2px 6px -1px rgba(133, 77, 14, 0.07), 0 1px 2px rgba(133, 77, 14, 0.04);
  --shadow-lg: 0 6px 18px -4px rgba(133, 77, 14, 0.09), 0 2px 4px rgba(133, 77, 14, 0.04);
}

/* ================================================================
   DEMO 14: VIRALMIND AI — Content & Reel Coach
   Vibrant expressive: hot pink/rose + gradient energy, playful
   ================================================================ */
[data-demo="influencer"] {
  --font-family-heading: 'Manrope', system-ui, sans-serif;
  --font-family-body: 'Epilogue', system-ui, sans-serif;

  --color-primary: #db2777;
  --color-primary-light: #f472b6;
  --color-primary-dark: #be185d;
  --color-secondary: #8b5cf6;
  --color-background: #fff1f2;
  --color-surface: #fce7f3;
  --color-text-primary: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #e11d48;
  --color-border: #fbcfe8;

  --radius-sm: 0.875rem;   /* 14px — pill-ish playful */
  --radius-md: 1.125rem;   /* 18px */
  --radius-lg: 1.5rem;     /* 24px */
  --radius-xl: 2rem;       /* 32px */
  --radius-2xl: 2.5rem;    /* 40px */
  --radius-full: 999px;

  --shadow-sm: 0 2px 4px rgba(219, 39, 119, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(219, 39, 119, 0.12), 0 2px 4px rgba(219, 39, 119, 0.06);
  --shadow-lg: 0 8px 24px -4px rgba(219, 39, 119, 0.15), 0 4px 8px rgba(219, 39, 119, 0.08);
}

/* --- ViralMind AI: Dark Mode --- */
.app-frame[data-demo="influencer"] {
  --white: #121215;
  --black: #f5f5f5;

  /* Neutral scale — dark variants */
  --neutral-50: #1e1e21;
  --neutral-200: #303033;
  --neutral-300: #3f3f42;
  --neutral-500: #a1a1aa;
  --neutral-700: #d4d4d8;

  /* Invert alpha channels */
  --alpha-light-25: rgba(255, 255, 255, 0.04);
  --alpha-light-50: rgba(255, 255, 255, 0.06);
  --alpha-light-100: rgba(255, 255, 255, 0.09);
  --alpha-light-200: rgba(255, 255, 255, 0.20);
  --alpha-light-300: rgba(255, 255, 255, 0.28);
  --alpha-light-400: rgba(255, 255, 255, 0.36);
  --alpha-light-500: rgba(255, 255, 255, 0.48);
  --alpha-light-600: rgba(255, 255, 255, 0.60);
  --alpha-light-900: rgba(255, 255, 255, 0.80);

  --alpha-dark-300: rgba(255, 255, 255, 0.08);
  --alpha-dark-600: rgba(255, 255, 255, 0.12);
  --alpha-dark-800: rgba(0, 0, 0, 0.40);
  --alpha-dark-900: rgba(0, 0, 0, 0.50);

  /* Design tokens — dark variants */
  --color-primary: #f472b6;
  --color-primary-light: #f9a8d4;
  --color-primary-dark: #ec4899;
  --color-secondary: #a78bfa;
  --color-background: #0d0d10;
  --color-surface: #18181b;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a1a1aa;
  --color-text-on-primary: #ffffff;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #fb7185;
  --color-border: rgba(255, 255, 255, 0.10);

  /* Shadows — softer on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 20px -4px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);

  --sidebar-tint: rgba(244, 114, 182, 0.06);
}

/* ================================================================
   DEMO 15: REFLECT AI — Guided Journaling Coach
   Serene contemplative: sage/olive + warm parchment, editorial
   ================================================================ */
[data-demo="journal"] {
  --font-family-heading: 'Spectral', Georgia, serif;
  --font-family-body: 'Jost', system-ui, sans-serif;

  --color-primary: #4d7c0f;
  --color-primary-light: #84cc16;
  --color-primary-dark: #365314;
  --color-secondary: #a16207;
  --color-background: #fefef5;
  --color-surface: #f7fee7;
  --color-text-primary: #1a2e05;
  --color-text-secondary: #6b7b4c;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #d9f99d;

  --radius-sm: 0.4375rem;  /* 7px — gentle organic */
  --radius-md: 0.625rem;   /* 10px */
  --radius-lg: 0.875rem;   /* 14px */
  --radius-xl: 1.125rem;   /* 18px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 4px rgba(77, 124, 15, 0.04);
  --shadow-md: 0 4px 14px -4px rgba(77, 124, 15, 0.07), 0 1px 4px rgba(77, 124, 15, 0.03);
  --shadow-lg: 0 12px 32px -8px rgba(77, 124, 15, 0.09), 0 4px 8px rgba(77, 124, 15, 0.04);
}

/* ================================================================
   DEMO 16: PULSE AI — Progress Report Generator
   Editorial structured: deep plum + warm accents, authoritative data
   ================================================================ */
[data-demo="reporter"] {
  --font-family-heading: 'Vollkorn', Georgia, serif;
  --font-family-body: 'Cabin', system-ui, sans-serif;

  --color-primary: #57534e;
  --color-primary-light: #a8a29e;
  --color-primary-dark: #44403c;
  --color-secondary: #c2410c;
  --color-background: #faf8f5;
  --color-surface: #f5f0eb;
  --color-text-primary: #292524;
  --color-text-secondary: #78716c;
  --color-text-on-primary: #ffffff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-border: #d6d3d1;

  --radius-sm: 0.1875rem;   /* 3px — editorial precise */
  --radius-md: 0.3125rem;   /* 5px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.6875rem;   /* 11px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(87, 83, 78, 0.06);
  --shadow-md: 0 3px 8px -2px rgba(87, 83, 78, 0.09), 0 1px 3px rgba(87, 83, 78, 0.05);
  --shadow-lg: 0 8px 20px -4px rgba(87, 83, 78, 0.12), 0 3px 6px rgba(87, 83, 78, 0.06);
}


/* ========================================================
   INTERACTIVE STATES
   Applied to all demos using semantic color tokens
   ======================================================== */

/* Focus-visible outlines — all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Disabled state */
[disabled],
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================================
   REDUCED MOTION — disabled for demo site
   Animations are the core product being showcased.
   ======================================================== */

/* ========================================================
   MOBILE-FIRST BASELINE
   ======================================================== */

/*
   Minimum tap targets — applied via component classes, not globally.
   Global min-height on button/a breaks compact UI elements like
   icon buttons, toggle pills, filter chips, and slider thumbs.
   Individual components should set their own min tap-target sizes.
*/

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* ========================================================
   FONT FAMILY BRIDGE
   Maps new token names to legacy variable names used in styles.css
   ======================================================== */
:root,
[data-demo] {
  --font-primary: var(--font-family-body);
  --font-custom: var(--font-family-heading);
}