/* ==========================================================================
   HealX Magazine — Theme & Color Palette
   Derived from the HealX Magazine logo:
     Navy   #002450  (primary brand color — "HEALX", "MAGAZINE" wordmark)
     Green  #00765c  (accent — the "X" swoosh)
     White  #ffffff  (logo background / negative space)
   ========================================================================== */

:root {
  /* ---- Core brand colors ---- */
  --color-navy:          #002450;
  --color-green:         #00765c;
  --color-white:         #ffffff;

  /* ---- Navy tints & shades ---- */
  --navy-900:            #001630;
  --navy-800:            #001d40;
  --navy-700:            #002450;  /* base */
  --navy-600:            #0a3468;
  --navy-500:            #1c4a86;
  --navy-300:            #6f8bb0;
  --navy-100:            #d5deeb;

  /* ---- Green tints & shades ---- */
  --green-900:           #004c3b;
  --green-700:           #00765c;  /* base */
  --green-500:           #159d7c;
  --green-300:           #6fc7b1;
  --green-100:           #d6efe8;

  /* ---- Neutrals ---- */
  --neutral-000:         #ffffff;
  --neutral-050:         #f6f8fa;
  --neutral-100:         #eceff3;
  --neutral-300:         #c3cad4;
  --neutral-500:         #8a94a3;
  --neutral-700:         #4a5361;
  --neutral-900:         #1b2330;

  /* ---- Semantic tokens ---- */
  --bg-page:             var(--navy-800);
  --bg-surface:          var(--navy-700);
  --bg-elevated:         var(--navy-600);

  --text-primary:        var(--neutral-000);
  --text-secondary:      #b9c6da;
  --text-muted:          var(--navy-300);
  --text-on-accent:      var(--neutral-000);

  --accent:              var(--green-500);
  --accent-strong:       var(--green-700);
  --accent-soft:         var(--green-100);

  --border-subtle:       rgba(255, 255, 255, 0.12);
  --border-strong:       rgba(255, 255, 255, 0.28);

  --focus-ring:          var(--green-300);

  /* ---- Typography ---- */
  --font-display:        "Georgia", "Times New Roman", serif;
  --font-body:           system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Spacing & radius ---- */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-pill:         999px;

  /* ---- Effects ---- */
  --shadow-soft:         0 10px 40px rgba(0, 10, 30, 0.45);
  --gradient-brand:      linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 55%, var(--green-900) 130%);
  --gradient-accent:     linear-gradient(90deg, var(--green-700), var(--green-500));

  /* ---- Motion ---- */
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
}