/* ============================================================
   EKM Growth Marketing — Color Tokens
   Brand palette (MIV EKM 2022): Preto · Branco · Areia · Vermelho · Cinza
   ============================================================ */
:root {
  /* ── Primary palette ──────────────────────────────────────── */
  --ekm-black:   #0D0D0D;   /* Preto    — primary background, dominant dark */
  --ekm-white:   #FFFFFF;   /* Branco   — text on dark, light surfaces */
  --ekm-sand:    #BCAD9B;   /* Areia    — Pantone 7529 C · secondary accent */
  --ekm-red:     #EC3E3E;   /* Vermelho — Pantone Red 032 C · hot accent */

  /* ── Cinza — brand grey is a cool blue-slate, not neutral ─── */
  --ekm-gray-100: #F5F5F5;
  --ekm-gray-200: #E0E0E0;
  --ekm-gray-300: #C5D1D1;   /* light slate (from color chart) */
  --ekm-gray-400: #9DAEAE;   /* mid slate */
  --ekm-gray-500: #6E8080;   /* slate */
  --ekm-gray-600: #4A5055;   /* dark slate */
  --ekm-gray-700: #363D42;   /* charcoal slate */
  --ekm-gray-800: #252A2D;   /* near-black slate — card surface */
  --ekm-gray-900: #111518;   /* deepest surface above pure black */

  /* ── Areia (sand) tints ───────────────────────────────────── */
  --ekm-sand-100: #F2EDE7;
  --ekm-sand-200: #DDD4C8;
  --ekm-sand-300: #BCAD9B;   /* base */
  --ekm-sand-400: #9E8D7C;
  --ekm-sand-500: #7D6E5E;

  /* ── Red states ───────────────────────────────────────────── */
  --ekm-red-hover:  #D42E2E;   /* darken on hover */
  --ekm-red-press:  #BE2424;

  /* ── Semantic — surfaces & background ─────────────────────── */
  --color-bg:           var(--ekm-black);
  --color-bg-alt:       var(--ekm-gray-900);
  --color-bg-light:     var(--ekm-sand-100);
  --color-surface:      var(--ekm-gray-900);
  --color-surface-2:    var(--ekm-gray-800);
  --color-surface-light: var(--ekm-white);

  /* ── Semantic — borders ───────────────────────────────────── */
  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.16);
  --color-border-dark:   rgba(13,13,13,0.10);
  --color-border-light:  var(--ekm-sand-200);

  /* ── Semantic — foreground / text ─────────────────────────── */
  --color-fg:        var(--ekm-white);
  --color-fg-muted:  var(--ekm-sand);
  --color-fg-subtle: var(--ekm-gray-500);
  --color-fg-faint:  rgba(255,255,255,0.45);
  --color-fg-dark:   var(--ekm-black);

  /* ── Semantic — accent / interactive ──────────────────────── */
  --color-accent:        var(--ekm-red);
  --color-accent-hover:  var(--ekm-red-hover);
  --color-accent-press:  var(--ekm-red-press);
  --color-accent-fg:     var(--ekm-white);

  /* ── Semantic — status ────────────────────────────────────── */
  --color-success: #3DB272;
  --color-warning: #E0A23E;
  --color-danger:  var(--ekm-red);
  --color-info:    var(--ekm-gray-400);
}