/* ============================================================
   ecosystem-tokens.css — Design Tokens do Ecossistema VejaNo.link & Emily IA
   
   Arquitetura de tokens em 4 camadas (seguindo a convenção de bio-tokens.css):
     1. Primitive  (--primitive-*)  — valores brutos imutáveis
     2. Theme      (--theme-*)      — morfologia por preset ([data-theme="emily" | "vejano"])
     3. Blueprint  (--card-*, ...)  — contratos de componentes estruturais (.glass-card, etc)
     4. Usage      (aliases curtos) — vocabulário semântico consumido no layout
   ============================================================ */

/* ─── 1. PRIMITIVE VALUES (Cores, Espaçamentos e Raios Imutáveis) ─── */
:root {
  /* Neutrals (Escala Slate / Deep Space) */
  --primitive-slate-950: #020617;
  --primitive-slate-900: #070b14;
  --primitive-slate-850: #0b0f19;
  --primitive-slate-800: #0f172a;
  --primitive-slate-700: #1e293b;
  --primitive-slate-600: #334155;
  --primitive-slate-400: #94a3b8;
  --primitive-slate-300: #cbd5e1;
  --primitive-slate-200: #e2e8f0;
  --primitive-slate-100: #f1f5f9;
  --primitive-white:     #ffffff;

  /* Brand Accents */
  --primitive-cyan-400:   #38bdf8;
  --primitive-cyan-500:   #0ea5e9;
  --primitive-cyan-600:   #0284c7;
  --primitive-orange-400: #fb923c;
  --primitive-orange-500: #f97316;
  --primitive-orange-600: #ea580c;
  --primitive-purple-400: #c084fc;
  --primitive-purple-500: #a855f7;
  --primitive-purple-600: #7c3aed;
  --primitive-emerald-400:#34d399;
  --primitive-emerald-500:#10b981;
  --primitive-emerald-600:#059669;
  --primitive-rose-400:   #f43f5e;
  --primitive-rose-500:   #e11d48;
  --primitive-pink-400:   #ec4899;
  --primitive-pink-500:   #db2777;
  --primitive-red-600:    #b91c1c;
  --primitive-red-700:    #991b1b;

  /* Brand Colors */
  --primitive-brand-whatsapp: #22c55e;
  --primitive-brand-whatsapp-hover: #16a34a;
  --primitive-brand-instagram-start: #e1306c;
  --primitive-brand-instagram-mid: #fd1d1d;
  --primitive-brand-instagram-end: #f77737;

  /* Typography */
  --primitive-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --primitive-font-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --primitive-radius-xs: 4px;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 16px;
  --primitive-radius-lg: 24px;
  --primitive-radius-xl: 32px;
  --primitive-radius-pill: 9999px;

  /* Physics / Transitions */
  --primitive-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── 2. THEME TOKENS (Morfologia por Preset de Marca) ─── */

/* Preset Padrão & Emily Dark Glass ([data-theme="emily"]) */
:root,
[data-theme="emily"] {
  --theme-canvas:                 var(--primitive-slate-900);
  --theme-surface-card:           rgba(15, 23, 42, 0.75);
  --theme-surface-card-hover:     rgba(30, 41, 59, 0.65);
  --theme-surface-popover:        rgba(15, 23, 42, 0.95);
  --theme-surface-pill:           rgba(15, 23, 42, 0.85);

  --theme-card-blur:              blur(16px);
  --theme-card-border-color:      rgba(255, 255, 255, 0.08);
  --theme-card-border-strong:     rgba(255, 255, 255, 0.14);
  --theme-card-border:            1px solid var(--theme-card-border-color);
  --theme-card-border-hover:      rgba(56, 189, 248, 0.35);
  --theme-card-shadow:            0 20px 45px rgba(0, 0, 0, 0.6);
  --theme-specular:               inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  --theme-text-primary:           var(--primitive-white);
  --theme-text-secondary:         var(--primitive-slate-300);
  --theme-text-muted:             var(--primitive-slate-400);
  --theme-text-hint:              var(--primitive-slate-600);

  --theme-accent-primary:         var(--primitive-cyan-400);
  --theme-accent-secondary:       var(--primitive-orange-400);
  --theme-accent-highlight:       var(--primitive-purple-400);
  --theme-accent-success:         var(--primitive-emerald-400);

  --theme-glow-primary:           rgba(56, 189, 248, 0.15);
  --theme-glow-secondary:         rgba(251, 146, 60, 0.12);
  --theme-glow-purple:            rgba(168, 85, 247, 0.12);
}

/* Preset VejaNo.link Solar / Minimal ([data-theme="vejano"]) */
[data-theme="vejano"] {
  --theme-canvas:                 #fafafa;
  --theme-surface-card:           rgba(255, 255, 255, 0.92);
  --theme-surface-card-hover:     #ffffff;
  --theme-surface-popover:        #ffffff;
  --theme-surface-pill:           rgba(240, 240, 240, 0.9);

  --theme-card-blur:              blur(10px);
  --theme-card-border-color:      rgba(0, 0, 0, 0.08);
  --theme-card-border-strong:     rgba(0, 0, 0, 0.15);
  --theme-card-border:            1px solid var(--theme-card-border-color);
  --theme-card-border-hover:      rgba(251, 146, 60, 0.4);
  --theme-card-shadow:            0 10px 30px rgba(0, 0, 0, 0.06);
  --theme-specular:               inset 0 1px 0 0 rgba(255, 255, 255, 0.8);

  --theme-text-primary:           var(--primitive-slate-950);
  --theme-text-secondary:         var(--primitive-slate-700);
  --theme-text-muted:             var(--primitive-slate-600);
  --theme-text-hint:              var(--primitive-slate-400);

  --theme-accent-primary:         var(--primitive-orange-500);
  --theme-accent-secondary:       var(--primitive-cyan-500);
  --theme-accent-highlight:       var(--primitive-purple-500);
  --theme-accent-success:         var(--primitive-emerald-500);

  --theme-glow-primary:           rgba(251, 146, 60, 0.15);
  --theme-glow-secondary:         rgba(56, 189, 248, 0.12);
  --theme-glow-purple:            rgba(168, 85, 247, 0.08);
}

/* ─── 3. USAGE ALIASES (Compatibilidade e Consumo pelo Layout) ─── */
:root {
  --bg:                   var(--theme-canvas);
  --card-bg:              var(--theme-surface-card);
  --card-border:          var(--theme-card-border-color);

  --primary-cyan:         var(--theme-accent-primary);
  --primary-orange:       var(--theme-accent-secondary);
  --primary-purple:       var(--theme-accent-highlight);
  --primary-emerald:      var(--theme-accent-success);

  --text-main:            var(--theme-text-primary);
  --text-sub:             var(--theme-text-secondary);
  --text-muted:           var(--theme-text-muted);
  --text-hint:            var(--theme-text-hint);

  --radius-xs:            var(--primitive-radius-xs);
  --radius-sm:            var(--primitive-radius-sm);
  --radius-md:            var(--primitive-radius-md);
  --radius-lg:            var(--primitive-radius-lg);
  --radius-xl:            var(--primitive-radius-xl);
  --radius-pill:          var(--primitive-radius-pill);

  --font-sans:            var(--primitive-font-sans);
  --font-mono:            var(--primitive-font-mono);
  --ease-spring:          var(--primitive-ease-spring);
  --shadow-float:         var(--theme-card-shadow);
  --specular-highlight:   var(--theme-specular);

  /* Brands */
  --color-whatsapp:       var(--primitive-brand-whatsapp);
  --color-whatsapp-hover: var(--primitive-brand-whatsapp-hover);
  --gradient-instagram:   linear-gradient(135deg, var(--primitive-brand-instagram-start) 0%, var(--primitive-brand-instagram-mid) 50%, var(--primitive-brand-instagram-end) 100%);

  /* Z-Index Hierarchy Scale */
  --z-canvas:             0;
  --z-base:               1;
  --z-stage:              10;
  --z-narrative:          20;
  --z-card:               25;
  --z-customer:           30;
  --z-island:             100;
  --z-nav:                110;

  /* Layout tokens (Note: Duplicated with site-shell.css for cascade independence) */
  --page-gutter:          20px;
  --island-inset-y:       14px;
}

@media (max-width: 600px) {
  :root {
    --page-gutter:        14px;
    --island-inset-y:     14px;
  }
}

/* ─── 4. COMPONENT BLUEPRINTS ─── */

/* Glass Card Blueprint */
.glass-card {
  background: var(--theme-surface-card);
  border: var(--theme-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--theme-specular), var(--theme-card-shadow);
  backdrop-filter: var(--theme-card-blur);
  -webkit-backdrop-filter: var(--theme-card-blur);
  position: relative;
  transition: transform 0.25s var(--ease-spring), border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--theme-card-border-hover);
  box-shadow: var(--theme-specular), 0 24px 50px rgba(0, 0, 0, 0.7);
}

/* Badge Pill Blueprint */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.badge-pill--cyan {
  background: rgba(56, 189, 248, 0.15);
  color: var(--primary-cyan);
  border-color: rgba(56, 189, 248, 0.3);
}

.badge-pill--orange {
  background: rgba(251, 146, 60, 0.15);
  color: var(--primary-orange);
  border-color: rgba(251, 146, 60, 0.3);
}

.badge-pill--purple,
.badge-step-3 {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-purple);
  border-color: rgba(168, 85, 247, 0.3);
}

.badge-pill--emerald {
  background: rgba(52, 211, 153, 0.15);
  color: var(--primary-emerald);
  border-color: rgba(52, 211, 153, 0.3);
}

.badge-pill--pink {
  background: rgba(236, 72, 153, 0.15);
  color: var(--primitive-pink-400);
  border-color: rgba(236, 72, 153, 0.3);
}