/* ============================================
   EOL'LIEN — Color Tokens
   ============================================ */

:root {
  /* ── BRAND PRIMARY ─────────────────────── */
  --color-ocean:        #329AA6;   /* Primary blue — sea, sky, trust */
  --color-meadow:       #1EB964;   /* Primary green — nature, ecology */

  /* ── BRAND SECONDARY ───────────────────── */
  --color-sky:          #45D5E6;   /* Light blue — freshness, clarity */
  --color-lime:         #25E67B;   /* Light green — energy, vitality */

  /* ── NEUTRALS ──────────────────────────── */
  --color-white:        #F3F3F3;
  --color-gray-100:     #E6E6E6;
  --color-gray-200:     #CFD6E6;
  --color-gray-400:     #8A94A8;
  --color-gray-600:     #4A5568;
  --color-black:        #1B1C1E;

  /* ── SEMANTIC SURFACE ─────────────────── */
  --color-bg:           var(--color-white);
  --color-bg-subtle:    var(--color-gray-100);
  --color-bg-muted:     var(--color-gray-200);
  --color-border:       var(--color-gray-200);
  --color-border-strong: #B0BAD0;

  /* ── SEMANTIC TEXT ──────────────────────── */
  --color-text:         var(--color-black);
  --color-text-subtle:  var(--color-gray-600);
  --color-text-muted:   var(--color-gray-400);
  --color-text-on-dark: var(--color-white);

  /* ── INTERACTIVE ────────────────────────── */
  --color-primary:        var(--color-ocean);
  --color-primary-hover:  #287D87;
  --color-primary-press:  #1F6470;
  --color-primary-subtle: #EBF7F9;

  --color-secondary:        var(--color-meadow);
  --color-secondary-hover:  #189A52;
  --color-secondary-press:  #137A41;
  --color-secondary-subtle: #E8F8EF;

  /* ── STATES ─────────────────────────────── */
  --color-focus-ring:   rgba(50, 154, 166, 0.35);
  --color-overlay:      rgba(27, 28, 30, 0.45);
  --color-scrim:        rgba(27, 28, 30, 0.06);
}