/**
 * ECOS DESIGN SYSTEM — Core Tokens
 * Prefixo: --ecos-*
 * Modo padrão: dark (dark-first)
 * Dark mode: [data-theme="dark"] (explícito)
 * Light mode: [data-theme="light"]
 *
 * AGENT_GUIDE: Este é o arquivo de tokens GLOBAIS do ecossistema.
 * NUNCA use valores hardcoded nos outros arquivos CSS — use sempre variáveis deste arquivo.
 * Para criar um tema de player, sobrescreva as variáveis em themes/[player].css
 *
 * Ref cruzada: AGENT_GUIDE.md#tokens | themes/*.css | CONSUMPTION_GUIDE.md#tokens
 */

/* ===================================================================
   DARK MODE (padrão / default) — sem seletor, aplica em :root
   =================================================================== */
:root,
[data-theme="dark"] {

  /* — Cores Principais — */
  --ecos-color-primary: #3b82f6;
  --ecos-color-primary-hover: #60a5fa;
  --ecos-color-primary-light: #1e3a5f;

  --ecos-color-cta: #C41E3A;
  --ecos-color-cta-hover: #e8253f;

  --ecos-color-success: #10b981;
  --ecos-color-success-light: #064e3b;
  --ecos-color-warning: #f59e0b;
  --ecos-color-danger: #ef4444;
  --ecos-color-danger-light: #450a0a;

  /* — Superfícies e Fundos — */
  --ecos-color-bg: #0a0a0a;
  --ecos-color-surface: #111827;
  --ecos-color-surface-2: #1e293b;
  --ecos-color-surface-3: #2d3748;
  --ecos-color-surface-4: #3d4a5c;
  --ecos-color-border: #334155;
  --ecos-color-border-subtle: rgba(255, 255, 255, 0.08);

  /* — Cores Semânticas Muted (para Toast/Alert) — */
  --ecos-color-success-muted: #064e3b;
  --ecos-color-warning-muted: #451a03;
  --ecos-color-danger-muted: #450a0a;
  --ecos-color-info: #06b6d4;
  --ecos-color-info-muted: #0c4a6e;

  /* — Texto — */
  --ecos-color-text: #f1f5f9;
  --ecos-color-text-muted: #94a3b8;
  --ecos-color-text-faint: #64748b;
  --ecos-color-text-on-accent: #ffffff;

  /* — Overlay / glassmorphism — */
  --ecos-color-glass-bg: rgba(255, 255, 255, 0.05);
  --ecos-color-glass-border: rgba(255, 255, 255, 0.12);
  --ecos-color-overlay: rgba(0, 0, 0, 0.7);

  /* — Tokens Semânticos — */
  --ecos-color-accent: var(--ecos-color-primary);
  --ecos-color-accent-hover: var(--ecos-color-primary-hover);
  --ecos-color-highlight: var(--ecos-color-primary-light);

  /* — Ring / Focus — */
  --ecos-ring-color: var(--ecos-color-primary);
  --ecos-ring-width: 3px;
  --ecos-ring-offset: 2px;

  /* — Tipografia — */
  --ecos-font-sans: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --ecos-font-display: 'Montserrat', 'Inter', sans-serif;
  --ecos-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --ecos-text-xs: 0.75rem;
  /* 12px */
  --ecos-text-sm: 0.875rem;
  /* 14px */
  --ecos-text-base: 1rem;
  /* 16px */
  --ecos-text-lg: 1.125rem;
  /* 18px */
  --ecos-text-xl: 1.25rem;
  /* 20px */
  --ecos-text-2xl: 1.5rem;
  /* 24px */
  --ecos-text-3xl: 1.875rem;
  /* 30px */
  --ecos-text-4xl: 2.25rem;
  /* 36px */
  --ecos-text-5xl: 3rem;
  /* 48px */
  --ecos-text-6xl: 3.75rem;
  /* 60px */

  --ecos-font-normal: 400;
  --ecos-font-medium: 500;
  --ecos-font-semibold: 600;
  --ecos-font-bold: 700;
  --ecos-font-black: 800;

  --ecos-leading-tight: 1.1;
  --ecos-leading-snug: 1.3;
  --ecos-leading-normal: 1.5;
  --ecos-leading-relaxed: 1.7;

  /* — Espaçamento (escala 4px) — */
  --ecos-space-1: 0.25rem;
  /* 4px  */
  --ecos-space-2: 0.5rem;
  /* 8px  */
  --ecos-space-3: 0.75rem;
  /* 12px */
  --ecos-space-4: 1rem;
  /* 16px */
  --ecos-space-5: 1.25rem;
  /* 20px */
  --ecos-space-6: 1.5rem;
  /* 24px */
  --ecos-space-8: 2rem;
  /* 32px */
  --ecos-space-10: 2.5rem;
  /* 40px */
  --ecos-space-12: 3rem;
  /* 48px */
  --ecos-space-16: 4rem;
  /* 64px */
  --ecos-space-20: 5rem;
  /* 80px */
  --ecos-space-24: 6rem;
  /* 96px */

  /* — Layout — */
  --ecos-max-width-content: 75rem;
  /* 1200px */
  --ecos-max-width-text: 60rem;
  /* 960px */
  --ecos-max-width-narrow: 42rem;
  /* 672px */
  --ecos-sidebar-width: 16rem;
  /* 256px */
  --ecos-navbar-height: 4rem;
  /* 64px */

  /* — Touch targets (WCAG 2.5.5) — */
  --ecos-touch-min: 2.75rem;
  /* 44px */
  --ecos-touch-comfortable: 3rem;
  /* 48px */

  /* — Border Radius — */
  --ecos-radius-sm: 0.25rem;
  /* 4px  */
  --ecos-radius-md: 0.5rem;
  /* 8px  */
  --ecos-radius-lg: 0.75rem;
  /* 12px */
  --ecos-radius-xl: 1rem;
  /* 16px */
  --ecos-radius-2xl: 1.5rem;
  /* 24px */
  --ecos-radius-full: 9999px;

  /* — Sombras — */
  --ecos-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ecos-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ecos-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --ecos-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --ecos-shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);

  /* — Transições — */
  --ecos-duration-fast: 0.15s;
  --ecos-duration-normal: 0.2s;
  --ecos-duration-slow: 0.3s;
  --ecos-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ecos-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ecos-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ecos-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ecos-ease-spring: cubic-bezier(0.5, 1.8, 0.5, 0.8);
  --ecos-transition: var(--ecos-duration-normal) var(--ecos-ease);
  --ecos-transition-fast: var(--ecos-duration-fast) var(--ecos-ease-out);
  --ecos-transition-slow: var(--ecos-duration-slow) var(--ecos-ease);

  /* — Blur (para glassmorphism, backdrops) — */
  --ecos-blur-sm: blur(4px);
  --ecos-blur-md: blur(8px);
  --ecos-blur-lg: blur(16px);

  /* — Z-index Scale — */
  --ecos-z-base: 0;
  --ecos-z-raised: 1;
  --ecos-z-overlay: 10;
  --ecos-z-modal: 100;
  --ecos-z-toast: 200;
  --ecos-z-tooltip: 300;

  /* — Estados — */
  --ecos-opacity-disabled: 0.45;
  --ecos-cursor-disabled: not-allowed;

  /* — Design Post/Social (proporção 4:5) — */
  --ecos-post-px: 7.5rem;
  /* 120px padding horizontal */
  --ecos-post-py: 6.25rem;
  /* 100px padding vertical   */
  --ecos-post-gap: 3.5rem;
  /* 56px gap entre seções    */
}

/* ===================================================================
   LIGHT MODE
   =================================================================== */
[data-theme="light"] {
  --ecos-color-primary: #2563eb;
  --ecos-color-primary-hover: #1d4ed8;
  --ecos-color-primary-light: #eff6ff;

  --ecos-color-bg: #f8fafc;
  --ecos-color-surface: #ffffff;
  --ecos-color-surface-2: #f1f5f9;
  --ecos-color-surface-3: #e2e8f0;
  --ecos-color-border: #e2e8f0;
  --ecos-color-border-subtle: rgba(0, 0, 0, 0.06);

  --ecos-color-text: #0f172a;
  --ecos-color-text-muted: #475569;
  --ecos-color-text-faint: #94a3b8;

  --ecos-color-glass-bg: rgba(0, 0, 0, 0.03);
  --ecos-color-glass-border: rgba(0, 0, 0, 0.08);
  --ecos-color-overlay: rgba(0, 0, 0, 0.5);

  --ecos-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ecos-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ecos-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --ecos-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --ecos-shadow-glow: 0 0 40px rgba(37, 99, 235, 0.2);

  --ecos-color-success-light: #d1fae5;
  --ecos-color-danger-light: #fee2e2;
}