/* ============================================================
   PLENO — Design Tokens · PREMIUM
   "Tu vida, completa."
   Día = ÓNIX (blanco greige · ónix · oro antiguo)
   Noche = NOIR (negro cálido · bone · oro)
   Tipografía: Sora
   ============================================================ */

:root {
  /* ---------- PRIMARY = INK (ónix) — botones, nav, selección ---------- */
  --pl-primary-50:  #F0EDE6;
  --pl-primary-100: #E6E1D7;
  --pl-primary-200: #D2CABB;
  --pl-primary-300: #B0A892;
  --pl-primary-400: #6E6A60;
  --pl-primary-500: #34302A;
  --pl-primary-600: #1B1A17;  /* ★ INK / PRIMARY */
  --pl-primary-700: #15140F;
  --pl-primary-800: #100F0C;
  --pl-primary-900: #0A0907;  /* texto sobre oro (no se invierte en dark) */

  /* ---------- ACCENT = ORO (IA · CTAs · highlights) ---------- */
  --pl-accent-50:  #F2EAD7;
  --pl-accent-100: #EBDDBE;
  --pl-accent-200: #DCC798;
  --pl-accent-300: #CBAE6E;
  --pl-accent-400: #B5904A;  /* ★ ORO */
  --pl-accent-500: #9A7836;
  --pl-accent-600: #7E6128;
  --pl-accent-700: #5E4818;

  /* ---------- SUCCESS = positivo (oro) — ingresos, hábitos hechos ---------- */
  --pl-success-50:  #F2EAD7;
  --pl-success-100: #EBDDBE;
  --pl-success-400: #C2A05A;
  --pl-success-500: #B5904A;  /* ★ = oro */
  --pl-success-600: #9A7836;

  /* ---------- ALERT = arcilla cálida (gasto alto, racha en riesgo) ---------- */
  --pl-alert-50:  #F6E8E2;
  --pl-alert-100: #EBD2C7;
  --pl-alert-400: #C27A60;
  --pl-alert-500: #B0654E;  /* ★ ALERT */
  --pl-alert-600: #8F4E3A;

  /* ---------- GRISES CÁLIDOS ---------- */
  --pl-gray-50:  #F6F4EF;
  --pl-gray-100: #EDEAE2;
  --pl-gray-200: #E0DBD1;
  --pl-gray-300: #C9C2B4;
  --pl-gray-400: #A39D8F;
  --pl-gray-500: #79726A;
  --pl-gray-600: #565049;
  --pl-gray-700: #3A352E;
  --pl-gray-800: #262320;
  --pl-gray-900: #181613;

  /* ---------- SUPERFICIES (Día · ÓNIX) ---------- */
  --pl-bg:        #F3F1EC;   /* blanco greige cálido */
  --pl-surface:   #FBFAF7;
  --pl-surface-2: #EEEBE3;
  --pl-border:    #E4E0D7;
  --pl-text:      #1A1916;
  --pl-text-soft: #6E6A60;
  --pl-text-mute: #A39D90;
  --pl-on-primary:#F4EFE3;

  /* ---------- INK CARD (tarjeta destacada tipo "tarjeta negra") ---------- */
  --pl-ink-card:        #1B1A17;
  --pl-ink-card-text:   #F4EFE3;
  --pl-ink-card-label:  #CBAE6E;
  --pl-ink-card-border: transparent;

  /* ---------- CATEGORÍAS — neutras cálidas + oro ---------- */
  --pl-cat-comida:     #B0654E;
  --pl-cat-transporte: #6E7A6A;
  --pl-cat-vivienda:   #6E748A;
  --pl-cat-negocio:    #1B1A17;
  --pl-cat-ocio:       #8A6E84;
  --pl-cat-salud:      #5E7A6E;
  --pl-cat-servicios:  #B5904A;
  --pl-cat-otros:      #A39D90;

  /* ---------- TIPOGRAFÍA ---------- */
  --pl-font: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pl-fs-display: 32px;  --pl-lh-display: 38px; --pl-fw-display: 700;
  --pl-fs-h1: 24px;       --pl-lh-h1: 30px;      --pl-fw-h1: 600;
  --pl-fs-h2: 20px;       --pl-lh-h2: 26px;      --pl-fw-h2: 600;
  --pl-fs-h3: 17px;       --pl-lh-h3: 23px;      --pl-fw-h3: 600;
  --pl-fs-body: 15px;     --pl-lh-body: 23px;    --pl-fw-body: 400;
  --pl-fs-caption: 13px;  --pl-lh-caption: 18px; --pl-fw-caption: 400;
  --pl-fs-label: 11px;    --pl-lh-label: 14px;   --pl-fw-label: 500;
  --pl-tracking-label: 0.08em;

  /* ---------- ESPACIADO (base 4px) ---------- */
  --pl-s1: 4px;  --pl-s2: 8px;  --pl-s3: 12px; --pl-s4: 16px;
  --pl-s5: 20px; --pl-s6: 24px; --pl-s8: 32px; --pl-s10: 40px;
  --pl-s12: 48px; --pl-s16: 64px;
  --pl-gutter: 16px;

  /* ---------- BORDER RADIUS ---------- */
  --pl-r-card: 16px;
  --pl-r-input: 12px;
  --pl-r-badge: 8px;
  --pl-r-button: 24px;
  --pl-r-full: 999px;

  /* ---------- SOMBRAS (suaves y cálidas) ---------- */
  --pl-shadow-sm: 0 1px 2px rgba(26, 25, 22, 0.05), 0 1px 3px rgba(26, 25, 22, 0.04);
  --pl-shadow-md: 0 2px 6px rgba(26, 25, 22, 0.06), 0 6px 16px rgba(26, 25, 22, 0.07);
  --pl-shadow-lg: 0 8px 24px rgba(26, 25, 22, 0.10), 0 2px 8px rgba(26, 25, 22, 0.06);
  --pl-shadow-accent: 0 6px 18px rgba(181, 144, 74, 0.28);
  --pl-shadow-primary: 0 6px 18px rgba(27, 26, 23, 0.22);
  --pl-focus-ring: 0 0 0 4px rgba(181, 144, 74, 0.18);

  /* ---------- NAV ---------- */
  --pl-bottomnav-h: 64px;

  /* ---------- MOTION ---------- */
  --pl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   NOCHE — NOIR (negro cálido + bone + oro)
   ============================================================ */
.pl-dark {
  --pl-bg:        #141310;
  --pl-surface:   #1D1B17;
  --pl-surface-2: #262320;
  --pl-border:    #332F28;
  --pl-text:      #ECE6DB;
  --pl-text-soft: #A39C8C;
  --pl-text-mute: #736C5E;
  --pl-on-primary:#15130F;   /* texto oscuro sobre primary (bone) */

  /* INK / PRIMARY se invierte a "bone" para alto contraste sobre negro */
  --pl-primary-50:  #262320;
  --pl-primary-100: #332F28;
  --pl-primary-300: #4A4439;
  --pl-primary-400: #B8B0A0;
  --pl-primary-500: #D8D1C2;
  --pl-primary-600: #ECE6DB;  /* ★ bone */

  /* ORO se aclara para brillar sobre negro */
  --pl-accent-50:  #2A2418;
  --pl-accent-100: #3A3220;
  --pl-accent-200: #4E421F;
  --pl-accent-300: #E0C98D;
  --pl-accent-400: #CFAE63;  /* ★ oro */
  --pl-accent-500: #E0C98D;
  --pl-accent-600: #E4CF99;

  --pl-success-50:  #2A2418;
  --pl-success-100: #3A3220;
  --pl-success-400: #CFAE63;
  --pl-success-500: #CFAE63;
  --pl-success-600: #E4CF99;

  --pl-alert-50:  #2E1F18;
  --pl-alert-100: #3E281E;
  --pl-alert-400: #C27A60;
  --pl-alert-500: #CD8870;
  --pl-alert-600: #DDA088;

  /* grises invertidos cálidos */
  --pl-gray-100: #262320;
  --pl-gray-200: #332F28;
  --pl-gray-300: #443E34;
  --pl-gray-400: #736C5E;

  /* tarjeta destacada: negro elevado con hairline de oro */
  --pl-ink-card:        #201E19;
  --pl-ink-card-text:   #ECE6DB;
  --pl-ink-card-label:  #E0C98D;
  --pl-ink-card-border: rgba(207, 174, 99, 0.28);

  /* categorías un toque más luminosas sobre negro */
  --pl-cat-negocio:    #C9C2B4;
  --pl-cat-otros:      #8A8276;
  --pl-cat-servicios:  #CFAE63;

  --pl-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --pl-shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --pl-shadow-lg: 0 10px 30px rgba(0,0,0,0.55);
  --pl-shadow-accent: 0 6px 20px rgba(207, 174, 99, 0.22);
  --pl-shadow-primary: 0 6px 18px rgba(0,0,0,0.4);
  --pl-focus-ring: 0 0 0 4px rgba(207, 174, 99, 0.22);
}

/* ---------- Utilidades tipográficas ---------- */
.pl-display { font-size: var(--pl-fs-display); line-height: var(--pl-lh-display); font-weight: var(--pl-fw-display); letter-spacing: -0.02em; }
.pl-h1 { font-size: var(--pl-fs-h1); line-height: var(--pl-lh-h1); font-weight: var(--pl-fw-h1); letter-spacing: -0.015em; }
.pl-h2 { font-size: var(--pl-fs-h2); line-height: var(--pl-lh-h2); font-weight: var(--pl-fw-h2); letter-spacing: -0.01em; }
.pl-h3 { font-size: var(--pl-fs-h3); line-height: var(--pl-lh-h3); font-weight: var(--pl-fw-h3); }
.pl-body { font-size: var(--pl-fs-body); line-height: var(--pl-lh-body); font-weight: var(--pl-fw-body); }
.pl-caption { font-size: var(--pl-fs-caption); line-height: var(--pl-lh-caption); font-weight: var(--pl-fw-caption); }
.pl-label { font-size: var(--pl-fs-label); line-height: var(--pl-lh-label); font-weight: var(--pl-fw-label); letter-spacing: var(--pl-tracking-label); text-transform: uppercase; }