/**
 * MING Design System v8.0 — Paleta Verde Sage
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * PALETA PRINCIPAL:
 * - Cerúleo/Teal: #6997a5 (texto principal del logo)
 * - Teal oscuro: #073b2f (detalles)
 * - Dorado: #bdac86 (acentos)
 * - Verde Sage: #E8EDEA (fondos) — NUEVO v8
 * 
 * ÉNFASIS:
 * - Jade: #39684c (positivo)
 * - Violeta: #7D6B8E (secundario) — NUEVO v8
 * - Amarillo: #f8d24f (destacados)
 * - Rojo: #c82724 (importante)
 * 
 * SIN sombras, SIN border-radius, SIN gradientes
 * Estética editorial plana, como ilustración tradicional
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     PALETA PRIMARIA — Del Logo MING
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Cerúleo/Teal — Color principal del texto MING */
  --ming-cerulean: #6997a5;
  --ming-cerulean-dark: #4a7a87;
  --ming-cerulean-light: #8bb3be;
  
  /* Teal Bosque — Detalles oscuros */
  --ming-forest: #073b2f;
  --ming-forest-light: #0d5244;
  
  /* Dorado — Acentos y decoraciones */
  --ming-gold: #bdac86;
  --ming-gold-dark: #a89468;
  --ming-gold-light: #d4c9a8;
  
  /* Crema — Fondos cálidos */
  --ming-cream: #e3d4b4;
  --ming-cream-light: #f0e8d6;
  --ming-cream-dark: #d1c19d;
  
  /* ═══════════════════════════════════════════════════════════════════════
     ALIASES SEMÁNTICOS
     ═══════════════════════════════════════════════════════════════════════ */
  
  --ming-primary: var(--ming-cerulean);
  --ming-primary-dark: var(--ming-forest);
  --ming-primary-light: var(--ming-cerulean-light);
  --ming-accent: var(--ming-gold);
  
  /* Compatibilidad con código existente */
  --ming-teal: var(--ming-forest);
  --ming-teal-light: var(--ming-cerulean);
  --ming-teal-soft: rgba(7, 59, 47, 0.08);
  
  /* ═══════════════════════════════════════════════════════════════════════
     PAPEL Y FONDOS — Light Theme (Verde Sage Apagado + Cremas)
     ═══════════════════════════════════════════════════════════════════════ */
  
  --ming-paper: #E8EDEA;
  --ming-paper-warm: #DCE4DE;
  --ming-paper-dark: #CCD8D0;
  
  /* Tonos crema complementarios para suavizar */
  --ming-cream-soft: #F7F5F0;
  --ming-cream-warm: #F2EDE4;
  --ming-cream-accent: #EAE3D6;
  
  /* ═══════════════════════════════════════════════════════════════════════
     TINTA Y TEXTO — Más oscuro para mejor contraste
     ═══════════════════════════════════════════════════════════════════════ */
  
  --ming-ink: #1A1A1A;
  --ming-ink-light: #333333;
  --ming-ink-soft: #555555;
  
  /* ═══════════════════════════════════════════════════════════════════════
     ESCALA NEUTRAL — Basada en tonos verde-gris fríos
     ═══════════════════════════════════════════════════════════════════════ */
  
  --ming-900: #1A1D1B;
  --ming-800: #2A2E2C;
  --ming-700: #3A403D;
  --ming-600: #4B524E;
  --ming-500: #626A66;
  --ming-400: #8A918D;
  --ming-300: #A8B0AC;
  --ming-200: #C5CCC8;
  --ming-100: #DCE2DE;
  --ming-50: #EEF2F0;
  
  /* ═══════════════════════════════════════════════════════════════════════
     ELEMENTOS — Tonos naturales, no saturados
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Madera - Verde bosque */
  --el-wood: #4A7C59;
  --el-wood-light: rgba(74, 124, 89, 0.15);
  
  /* Fuego - Terracota */
  --el-fire: #B85C4D;
  --el-fire-light: rgba(184, 92, 77, 0.15);
  
  /* Tierra - Ocre/Dorado */
  --el-earth: #a88148;
  --el-earth-light: rgba(168, 129, 72, 0.15);
  
  /* Metal - Gris cálido */
  --el-metal: #7A7A72;
  --el-metal-light: rgba(122, 122, 114, 0.15);
  
  /* Agua - Teal del logo */
  --el-water: #073b2f;
  --el-water-light: rgba(7, 59, 47, 0.15);
  
  /* ═══════════════════════════════════════════════════════════════════════
     SEMÁNTICO
     ═══════════════════════════════════════════════════════════════════════ */
  
  --ming-success: var(--el-wood);
  --ming-warning: var(--ming-gold-dark);
  --ming-error: var(--el-fire);
  --ming-info: var(--ming-violet);
  
  /* ═══════════════════════════════════════════════════════════════════════
     ÉNFASIS — Colores de las flores decorativas + violeta
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Verde jade pálido - acentos positivos, tips */
  --ming-jade: #39684c;
  --ming-jade-light: rgba(57, 104, 76, 0.12);
  
  /* Violeta suave - énfasis secundario, links, badges especiales */
  --ming-violet: #7D6B8E;
  --ming-violet-light: rgba(125, 107, 142, 0.12);
  --ming-violet-soft: rgba(125, 107, 142, 0.08);
  
  /* Amarillo - destacados, badges, alertas suaves */
  --ming-yellow: #f8d24f;
  --ming-yellow-soft: rgba(248, 210, 79, 0.15);
  
  /* Rojo - énfasis importante, Day Master highlight */
  --ming-red: #c82724;
  --ming-red-soft: rgba(200, 39, 36, 0.12);
  
  /* ═══════════════════════════════════════════════════════════════════════
     SURFACES — Light Theme (sobre fondo verde sage)
     ═══════════════════════════════════════════════════════════════════════ */
  
  --surface-base: #FFFFFF;
  --surface-card: #FAFBFA;
  --surface-elevated: var(--ming-paper-warm);
  --surface-interactive: var(--ming-paper-dark);
  
  /* ═══════════════════════════════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════════════════════════════ */
  
  --text-primary: var(--ming-ink);
  --text-secondary: var(--ming-ink-light);
  --text-muted: var(--ming-ink-soft);
  --text-accent: var(--ming-forest);
  
  /* ═══════════════════════════════════════════════════════════════════════
     BORDERS — Sin sombras, solo líneas
     ═══════════════════════════════════════════════════════════════════════ */
  
  --border-subtle: rgba(44, 44, 44, 0.08);
  --border-default: rgba(44, 44, 44, 0.12);
  --border-strong: rgba(44, 44, 44, 0.2);
  --border-accent: var(--ming-gold);
  
  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════ */
  
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-chinese: 'Noto Serif SC', 'Songti SC', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  
  /* Scale */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-5xl: 3.815rem;
  --text-hero: 6rem;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* ═══════════════════════════════════════════════════════════════════════
     SPACING (8px base)
     ═══════════════════════════════════════════════════════════════════════ */
  
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* ═══════════════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════════════ */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --content-width: 680px;
  
  /* ═══════════════════════════════════════════════════════════════════════
     EFFECTS — Plano, sin artificios
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Border Radius — CERO */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 0;
  
  /* Shadows — NINGUNA */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: none;
  --shadow-inner: none;
  
  /* Borders */
  --border-card: 1px solid var(--border-default);
  --border-section: 1px solid var(--border-subtle);
  --border-accent-line: 2px solid var(--ming-gold);
  
  /* Transitions */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  
  /* ═══════════════════════════════════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════════════════════════════════ */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — Tema oscuro real, elegante
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Fondos oscuros */
  --ming-paper: #151413;
  --ming-paper-warm: #1C1B19;
  --ming-paper-dark: #232220;
  
  /* Cremas oscuros (para contraste en tarjetas) */
  --ming-cream-soft: #1F1E1C;
  --ming-cream-warm: #252320;
  --ming-cream-accent: #2A2825;
  
  /* Superficies */
  --surface-base: #0D0C0B;
  --surface-card: #1A1918;
  --surface-elevated: #232220;
  --surface-interactive: #2C2B28;
  
  /* Texto invertido */
  --ming-ink: #E8E6E1;
  --ming-ink-light: #C5C3BC;
  --ming-ink-soft: #9A988F;
  
  /* Texto semántico */
  --text-primary: #E8E6E1;
  --text-secondary: #C5C3BC;
  --text-muted: #9A988F;
  --text-accent: var(--ming-cerulean-light);
  
  /* Primarios ajustados para contraste en oscuro */
  --ming-primary: #7BA8B5;
  --ming-primary-dark: #5A8A96;
  --ming-primary-light: #9BC2CD;
  
  /* Dorado más brillante en oscuro */
  --ming-gold: #D4C498;
  --ming-gold-dark: #C5B280;
  --ming-gold-light: #E5D8B8;
  
  /* Borders en oscuro */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  
  /* Elementos más brillantes para oscuro */
  --el-wood: #6B9E78;
  --el-fire: #D07B6D;
  --el-earth: #D4A862;
  --el-metal: #A8A8A0;
  --el-water: #7BA8B5;
  
  /* Element light backgrounds */
  --el-wood-light: rgba(107, 158, 120, 0.15);
  --el-fire-light: rgba(208, 123, 109, 0.15);
  --el-earth-light: rgba(212, 168, 98, 0.15);
  --el-metal-light: rgba(168, 168, 160, 0.15);
  --el-water-light: rgba(123, 168, 181, 0.15);
  
  /* Énfasis ajustados para oscuro - más brillantes */
  --ming-jade: #5A9B70;
  --ming-jade-light: rgba(90, 155, 112, 0.18);
  --ming-violet: #9B8AAE;
  --ming-violet-light: rgba(155, 138, 174, 0.18);
  --ming-violet-soft: rgba(155, 138, 174, 0.12);
  --ming-yellow: #FFE066;
  --ming-yellow-soft: rgba(255, 224, 102, 0.18);
  --ming-red: #E85450;
  --ming-red-soft: rgba(232, 84, 80, 0.15);
  
  /* Escala neutral invertida */
  --ming-50: #1A1918;
  --ming-100: #2C2B28;
  --ming-200: #3D3C38;
  --ming-300: #4F4E49;
  --ming-400: #68675F;
  --ming-500: #8A8980;
  --ming-600: #A9A89F;
  --ming-700: #C9C8BF;
  --ming-800: #E5E4DC;
  --ming-900: #F5F4EE;
}

/* Media query para preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ming-paper: #151413;
    --ming-paper-warm: #1C1B19;
    --ming-paper-dark: #232220;
    --surface-base: #0D0C0B;
    --surface-card: #1A1918;
    --surface-elevated: #232220;
    --surface-interactive: #2C2B28;
    --ming-ink: #E8E6E1;
    --ming-ink-light: #C5C3BC;
    --ming-ink-soft: #9A988F;
    --text-primary: #E8E6E1;
    --text-secondary: #C5C3BC;
    --text-muted: #9A988F;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENT COLOR CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.el-wood { color: var(--el-wood); }
.el-fire { color: var(--el-fire); }
.el-earth { color: var(--el-earth); }
.el-metal { color: var(--el-metal); }
.el-water { color: var(--el-water); }

.element-wood { --el-color: var(--el-wood); color: var(--el-wood); }
.element-fire { --el-color: var(--el-fire); color: var(--el-fire); }
.element-earth { --el-color: var(--el-earth); color: var(--el-earth); }
.element-metal { --el-color: var(--el-metal); color: var(--el-metal); }
.element-water { --el-color: var(--el-water); color: var(--el-water); }