/* ==========================================================================
   PureLabMx × Peptide Tracker — Design Tokens compartidos (v10)
   Fuente única de colores, tipografía y radios para la App y la Tienda.
   El tema se elige con <html data-theme="dark|light"> y se recuerda en
   localStorage('purelab_theme') — ver js/theme.js.
   ========================================================================== */

/* ─── DARK THEME (Default) ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-main:        #080e1e;
  --bg-surface:     #0d1526;
  --bg-card:        #111c33;
  --bg-card-hover:  #162040;
  --bg-glass:       rgba(13, 21, 38, 0.82);
  --bg-input:       #0c1428;

  --border-color:   rgba(99, 130, 201, 0.18);
  --border-glass:   rgba(99, 130, 201, 0.22);
  --border-active:  rgba(16, 185, 129, 0.55);

  --text-main:      #e8f0fe;
  --text-sub:       #a0b3d0;
  --text-muted:     #607090;

  --primary-color:  #059669;
  --primary-accent: #10b981;
  --primary-glow:   rgba(16, 185, 129, 0.35);
  --primary-light:  rgba(16, 185, 129, 0.12);

  --cyan-accent:    #06b6d4;
  --cyan-glow:      rgba(6, 182, 212, 0.3);
  --indigo-accent:  #818cf8;
  --indigo-glow:    rgba(129, 140, 248, 0.3);
  --purple-accent:  #c084fc;
  --purple-glow:    rgba(192, 132, 252, 0.3);
  --amber-accent:   #fbbf24;
  --amber-glow:     rgba(251, 191, 36, 0.3);
  --rose-accent:    #fb7185;
  --rose-glow:      rgba(251, 113, 133, 0.3);
  --teal-accent:    #2dd4bf;
  --teal-glow:      rgba(45, 212, 191, 0.3);
  --sky-accent:     #38bdf8;
  --sky-glow:       rgba(56, 189, 248, 0.3);
  --gold-accent:    #f2b129;   /* acento comercial heredado de la tienda */
  --gold-glow:      rgba(242, 177, 41, 0.3);
  --danger:         #ef4444;

  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px var(--primary-glow);

  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  --font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --header-h: 62px;
  --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── LIGHT THEME ───────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-main:        #f0f4fb;
  --bg-surface:     #e8edf8;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f6f9ff;
  --bg-glass:       rgba(255, 255, 255, 0.88);
  --bg-input:       #f4f7fc;

  --border-color:   #d4dcea;
  --border-glass:   rgba(212, 220, 234, 0.9);
  --border-active:  rgba(5, 150, 105, 0.45);

  --text-main:      #0f1a2e;
  --text-sub:       #3a4a62;
  --text-muted:     #7288a8;

  --primary-color:  #059669;
  --primary-accent: #10b981;
  --primary-glow:   rgba(16, 185, 129, 0.2);
  --primary-light:  rgba(16, 185, 129, 0.1);

  --shadow-sm:  0 1px 4px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 16px rgba(15, 23, 42, 0.1);
  --shadow-lg:  0 10px 30px rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 20px var(--primary-glow);
}