/* =========================================================
   styles-light.css
   TRUE Light Theme Variables (RGB triplets)
   Works perfectly with your existing styles.css
   ========================================================= */

:root {
  /* =====================================================
     BACKGROUNDS
     ===================================================== */

  /* Page background */
  --bg-main: 248, 250, 252;        /* slate-50 */

  /* Sections / subtle panels */
  --bg-secondary: 241, 245, 249;   /* slate-100 */

  /* Cards / inputs / modals */
  --bg-card: 255, 255, 255;        /* white */

  /* =====================================================
     TEXT
     ===================================================== */

  --text-main: 15, 23, 42;         /* slate-900 */
  --text-muted: 71, 85, 105;       /* slate-600 */

  /* =====================================================
     UI / BORDERS
     ===================================================== */

  /* Very soft borders for light UI */
  --border-color: 148, 163, 184;   /* slate-400 */

  /* Brand primary */
  --primary-blue: 37, 99, 235;     /* blue-600 */

  /* =====================================================
     SHADOWS & OVERLAYS
     ===================================================== */

  /* Shadow base (used with low opacity) */
  --shadow-color: 15, 23, 42;

  /* Generic black for shadows */
  --shadow-black: 0, 0, 0;

  /* Glass background base */
  --glass-dark-bg: 255, 255, 255;

  /* =====================================================
     FAB NEUTRALS
     ===================================================== */

  --fab-gray: 148, 163, 184;       /* slate-400 */
  --fab-dark-gray: 100, 116, 139;  /* slate-500 */

  /* =====================================================
     BRAND COLORS
     ===================================================== */

  --brand-whatsapp: 37, 211, 102;           /* #25D366 */
  --brand-whatsapp-hover: 30, 190, 90;      /* #1ebe5a */

  --brand-message-bg: 255, 255, 255;
  --brand-message-color: 37, 99, 235;
  --brand-message-hover-bg: 241, 245, 249;
  --brand-message-hover-color: 37, 99, 235;

  /* =====================================================
     ON PRIMARY
     ===================================================== */

  --on-primary-text: 255, 255, 255;

  /* =====================================================
     GRADIENT BRAND
     ===================================================== */

  --primary-gradient-from: 37, 99, 235;     /* blue-600 */
  --primary-gradient-to: 67, 56, 202;       /* indigo-700 */
}