/* ============================================================
   JMR — COLOR TOKENS
   Brand: Iglesia Cristiana Jehová Mi Rey
   Base palette + semantic aliases. Default scope is Light Mode.
   Dark mode aliases live under [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Brand base palette ---- */
  --jmr-navy:         #1B296B; /* Primary brand — headers, nav, primary buttons */
  --jmr-navy-deep:    #0F1535; /* Dark-mode background */
  --jmr-navy-surface: #17214F; /* Dark-mode card surface */
  --jmr-navy-border:  #2B355F; /* Dark-mode borders */
  --jmr-navy-700:     #16225a; /* Pressed/hover for navy */
  --jmr-navy-300:     #4a578f; /* Lighter navy for subtle accents */
  --jmr-navy-100:     #e7e9f2; /* Navy tint surface (light mode) */

  --jmr-gold:         #E4BA42; /* Accent — CTAs, highlights, emphasis */
  --jmr-gold-dark:    #E2B73D; /* Gold hover/pressed */
  --jmr-gold-deep:    #C99B25; /* Stronger gold for text-on-light contrast */
  --jmr-gold-100:     #faf1d9; /* Gold tint surface */

  /* ---- Neutrals ---- */
  --white:            #FFFFFF;
  --ivory:            #FDFCF9; /* Surface / cards (light) */
  --charcoal:         #1C1C1E; /* Text primary (light) */
  --gray-med:         #6B7280; /* Text secondary (light) */
  --gray-light:       #D9D9D9; /* Borders (light) */
  --gray-d1:          #D1D5DB; /* Text secondary (dark) */

  /* ---- Status ---- */
  --success:          #2E7D5B;
  --warning:          #E4BA42;
  --danger:           #C0492F;
  --info:             #2F4FB0;

  /* ============================================================
     SEMANTIC ALIASES — LIGHT MODE (default)
     ============================================================ */
  --color-primary:        var(--jmr-navy);
  --color-primary-hover:  var(--jmr-navy-700);
  --color-on-primary:     var(--white);

  --color-accent:         var(--jmr-gold);
  --color-accent-hover:   var(--jmr-gold-dark);
  --color-accent-strong:  var(--jmr-gold-deep);
  --color-on-accent:      var(--jmr-navy);

  --bg-app:               var(--white);
  --surface-card:         var(--ivory);
  --surface-raised:       var(--white);
  --surface-sunken:       #F4F3EE;
  --surface-navy:         var(--jmr-navy);     /* hero / banner blocks */
  --surface-gold-tint:    var(--jmr-gold-100);
  --surface-navy-tint:    var(--jmr-navy-100);

  --text-primary:         var(--charcoal);
  --text-secondary:       var(--gray-med);
  --text-on-navy:         var(--white);
  --text-on-navy-muted:   #c3c9e2;
  --text-accent:          var(--jmr-gold-deep);

  --border-default:       var(--gray-light);
  --border-strong:        #BFC2C7;
  --border-accent:        var(--jmr-gold);

  --focus-ring:           color-mix(in srgb, var(--jmr-gold) 55%, transparent);
}

/* ============================================================
   SEMANTIC ALIASES — DARK MODE
   "Elegant, premium, comfortable for night reading."
   Rules: never pure black; cards always lighter than bg;
   navy + gold stay as the brand anchors.
   ============================================================ */
[data-theme="dark"] {
  --color-primary:        var(--jmr-navy);
  --color-primary-hover:  #243a8a;
  --color-on-primary:     var(--white);

  --color-accent:         var(--jmr-gold);
  --color-accent-hover:   var(--jmr-gold-dark);
  --color-accent-strong:  var(--jmr-gold);
  --color-on-accent:      var(--jmr-navy-deep);

  --bg-app:               var(--jmr-navy-deep);
  --surface-card:         var(--jmr-navy-surface);
  --surface-raised:       #1c2856;
  --surface-sunken:       #0c1130;
  --surface-navy:         var(--jmr-navy-surface);
  --surface-gold-tint:    color-mix(in srgb, var(--jmr-gold) 16%, var(--jmr-navy-surface));
  --surface-navy-tint:    #1a234d;

  --text-primary:         var(--white);
  --text-secondary:       var(--gray-d1);
  --text-on-navy:         var(--white);
  --text-on-navy-muted:   #c3c9e2;
  --text-accent:          var(--jmr-gold);

  --border-default:       var(--jmr-navy-border);
  --border-strong:        #3a4677;
  --border-accent:        var(--jmr-gold);

  --focus-ring:           color-mix(in srgb, var(--jmr-gold) 60%, transparent);
}