/* ─────────────────────────────────────────────
   LOVI.ai — Color Tokens
   ───────────────────────────────────────────── */
:root {
  /* ── Brand Blue (Primary) ── */
  --color-blue-500: #3b80f4;        /* Lovi Blue — main brand color */
  --color-blue-400: #3397ff;        /* Bright Blue — hover / accent */
  --color-blue-300: #1f8beb;        /* Mid Blue */
  --color-blue-200: #dae8ff;        /* Light Blue — tinted bg */
  --color-blue-100: #ebf2fe;        /* Pale Blue — subtle bg */
  --color-blue-600: #2264b2;        /* Deep Blue */
  --color-blue-700: #0b2c42;        /* Navy — dark headings / nav text */

  /* ── Neutrals ── */
  --color-black:    #000000;
  --color-grey-900: #191a1e;        /* Near-black bg */
  --color-grey-800: #222222;        /* Dark text */
  --color-grey-700: #333333;        /* Body text */
  --color-grey-600: #2f3957;        /* Slate */
  --color-grey-500: #cccccc;        /* Border / divider */
  --color-white:    #ffffff;
  --color-off-white: #fffff c;      /* Near-white */

  /* ── Accent / Status ── */
  --color-red:      #e2202d;        /* Error / alert */
  --color-red-muted: rgba(226,32,45,0.75);
  --color-green:    #25d166;        /* Success */
  --color-green-dark: #108a41;
  --color-orange:   #ff7a59;        /* Warm accent */

  /* ── Semantic Aliases ── */
  --color-brand:         var(--color-blue-500);
  --color-brand-hover:   var(--color-blue-400);
  --color-brand-muted:   var(--color-blue-200);
  --color-brand-subtle:  var(--color-blue-100);

  --color-text-primary:  var(--color-grey-800);
  --color-text-secondary:var(--color-grey-700);
  --color-text-navy:     var(--color-blue-700);
  --color-text-inverse:  var(--color-white);
  --color-text-brand:    var(--color-blue-500);

  --color-surface-page:  var(--color-white);
  --color-surface-brand: var(--color-blue-500);
  --color-surface-muted: var(--color-blue-100);
  --color-surface-dark:  var(--color-grey-900);
  --color-surface-navy:  var(--color-blue-700);

  --color-border:        var(--color-grey-500);
  --color-border-brand:  var(--color-blue-500);

  /* ── Shadow Colors ── */
  --shadow-blue:       rgba(59,128,244,0.35);
  --shadow-blue-soft:  rgba(59,128,244,0.20);
  --shadow-blue-glow:  rgba(59,128,244,0.60);
  --shadow-red:        rgba(226,32,45,0.75);
  --shadow-black:      rgba(0,0,0,0.30);
}