/* =========================================================
   THEME TOKENS
========================================================= */

:root,
html[data-theme="light"] {
  --pl-bg: #fff7f1;
  --pl-bg-soft: #ffefe3;
  --pl-surface: rgba(255, 255, 255, 0.80);
  --pl-surface-strong: #ffffff;
  --pl-card: rgba(255, 255, 255, 0.74);
  --pl-card-strong: #ffffff;

  --pl-text-dark: #1f130d;
  --pl-text-soft: #5b3d2d;
  --pl-text-muted: #7a5a48;

  --pl-border: rgba(249, 115, 22, 0.14);
  --pl-border-strong: rgba(249, 115, 22, 0.24);

  --pl-primary: #f97316;
  --pl-primary-2: #ea580c;
  --pl-accent: #fb923c;

  --pl-glow: rgba(249, 115, 22, 0.16);
  --pl-shadow: 0 24px 60px rgba(45, 24, 10, 0.12);
  --pl-shadow-soft: 0 14px 30px rgba(45, 24, 10, 0.08);
}

html[data-theme="dark"] {
  --pl-bg: #090909;
  --pl-bg-soft: #111214;
  --pl-surface: rgba(17, 18, 20, 0.82);
  --pl-surface-strong: #121316;
  --pl-card: rgba(19, 20, 23, 0.78);
  --pl-card-strong: #121316;

  --pl-text-light: #f5f5f7;
  --pl-text-soft: rgba(232, 233, 237, 0.86);
  --pl-text-muted: rgba(190, 193, 201, 0.72);

  --pl-border: rgba(251, 146, 60, 0.14);
  --pl-border-strong: rgba(251, 146, 60, 0.26);

  --pl-primary: #fb923c;
  --pl-primary-2: #f97316;
  --pl-accent: #fdba74;

  --pl-glow: rgba(251, 146, 60, 0.18);
  --pl-shadow: 0 28px 80px rgba(0, 0, 0, 0.40);
  --pl-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
}

/* ===========================
   GLOBAL
=========================== */

:root {
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-pill: 999px;

  --transition-fast: 0.18s ease;
  --transition-base: 0.3s ease;
  --brand-btn-radius: 18px;
  --brand-btn-padding-y: 0.95rem;
  --brand-btn-padding-x: 1.9rem;
  --brand-btn-shadow-orange: 0 18px 38px rgba(249, 115, 22, 0.28);
  --brand-btn-shadow-orange-hover: 0 24px 52px rgba(234, 88, 12, 0.34);
  --brand-btn-shadow-violet: 0 18px 38px rgba(124, 58, 237, 0.28);
  --brand-btn-shadow-violet-hover: 0 24px 52px rgba(109, 40, 217, 0.34);
  --brand-btn-grad-orange: #f97316;
  --brand-btn-grad-orange-hover: #ea580c;
  --brand-btn-grad-violet: #7c3aed;
  --brand-btn-grad-violet-hover: #6d28d9;
}

/* ===========================
   FUENTE BASE
=========================== */

body,
button,
input,
textarea,
select {
  font-family: "articulat-cf", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===========================
   TEMA CLARO
=========================== */

body.neu-root.theme-light {
  --bg: #fff7f1;
  --surface: #f7ecdf;
  --surface-soft: #fdf3e8;

  --text-main: #1f130d;
  --text-muted: #7a5a48;
  --title-color: #1f130d;

  --shadow-out:
    8px 8px 16px rgba(214, 186, 165, 0.55),
    -8px -8px 16px rgba(255, 255, 255, 0.92);

  --shadow-in:
    inset 6px 6px 12px rgba(214, 186, 165, 0.45),
    inset -6px -6px 12px rgba(255, 255, 255, 0.88);
}

/* ===========================
   TEMA OSCURO
=========================== */

body.neu-root.theme-dark {
  --bg: #090909;
  --surface: #121316;
  --surface-soft: #18191d;

  --text-main: #f5f5f7;
  --text-muted: rgba(190, 193, 201, 0.82);
  --title-color: #ffffff;

  --shadow-out:
    10px 10px 24px rgba(0, 0, 0, 0.72),
    -10px -10px 24px rgba(255, 255, 255, 0.03);

  --shadow-in:
    inset 6px 6px 16px rgba(0, 0, 0, 0.85),
    inset -6px -6px 14px rgba(255, 255, 255, 0.03);
}

/* ===========================
   BASE GLOBAL
=========================== */

html {
  scroll-behavior: smooth;
}

body.neu-root {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-main);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

/* ===========================
   TEXTOS GLOBALES
=========================== */

body.neu-root .text-muted,
.neu-text-muted {
  color: var(--text-muted) !important;
}

.neu-text-main {
  color: var(--text-main);
}

/* ===========================
   TÍTULOS GLOBALES
=========================== */

.h3.mb-3,
.section-title,
.neu-title {
  color: var(--title-color);
}

/* ===========================
   SUPERFICIES
=========================== */

.neu-surface {
  background: var(--surface);
  box-shadow: var(--shadow-out);
}