/* ============================================================
   MídiaCar — Design Tokens
   shared/styles/tokens.css

   ÚNICA fonte de verdade de identidade visual.
   Importar em todos os apps antes de qualquer outro CSS.
   Não adicionar regras de componente aqui — apenas tokens.
============================================================ */

:root {

  /* ── MARCA ──────────────────────────────────────────────── */
  --vm:        #D7282B;            /* vermelho principal */
  --vm-dark:   #A80F16;            /* hover / pressed */
  --vm-light:  #E8282B;            /* variante clara */
  --vm-rgb:    215, 40, 43;        /* canal RGB para rgba(var(--vm-rgb), X) */

  /* Variantes com opacidade — brand */
  --vm-05:   rgba(215, 40, 43, 0.05);
  --vm-06:   rgba(215, 40, 43, 0.06);
  --vm-08:   rgba(215, 40, 43, 0.08);
  --vm-09:   rgba(215, 40, 43, 0.09);
  --vm-10:   rgba(215, 40, 43, 0.10);
  --vm-12:   rgba(215, 40, 43, 0.12);
  --vm-15:   rgba(215, 40, 43, 0.15);
  --vm-18:   rgba(215, 40, 43, 0.18);
  --vm-20:   rgba(215, 40, 43, 0.20);
  --vm-25:   rgba(215, 40, 43, 0.25);
  --vm-30:   rgba(215, 40, 43, 0.30);
  --vm-35:   rgba(215, 40, 43, 0.35);
  --vm-40:   rgba(215, 40, 43, 0.40);
  --vm-45:   rgba(215, 40, 43, 0.45);
  --vm-50:   rgba(215, 40, 43, 0.50);
  --vm-60:   rgba(215, 40, 43, 0.60);
  --vm-70:   rgba(215, 40, 43, 0.70);
  --vm-80:   rgba(215, 40, 43, 0.80);
  --vm-85:   rgba(215, 40, 43, 0.85);
  --vm-90:   rgba(215, 40, 43, 0.90);


  /* ── ESCALA DE FUNDOS ───────────────────────────────────── */
  --preto:      #0D0D0D;           /* fundo principal */
  --preto2:     #141414;           /* fundo cards / sidebar */
  --preto3:     #1A1A1A;           /* fundo inputs / hover */
  --preto4:     #222222;           /* bordas / separadores */
  --preto-puro: #000000;           /* preto absoluto (fullscreen, mídia) */


  /* ── ESCALA DE CINZAS ───────────────────────────────────── */
  --cinza1:  #2A2A2A;
  --cinza2:  #3A3A3A;
  --cinza3:  #555555;
  --cinza4:  #888888;
  --cinza5:  #BBBBBB;
  --branco:  #FFFFFF;
  --branco2: #F5F5F5;
  --branco-rgb: 255, 255, 255;


  /* ── STATUS ─────────────────────────────────────────────── */
  --verde:     #22C55E;
  --verde-rgb: 34, 197, 94;
  --verde-10:  rgba(34, 197, 94, 0.10);
  --verde-12:  rgba(34, 197, 94, 0.12);
  --verde-20:  rgba(34, 197, 94, 0.20);
  --verde-25:  rgba(34, 197, 94, 0.25);
  --verde-40:  rgba(34, 197, 94, 0.40);
  --verde-50:  rgba(34, 197, 94, 0.50);

  /* WhatsApp — cor de terceiro usada no botão de suporte */
  --wpp:     #25D366;
  --wpp-rgb: 37, 211, 102;
  --wpp-10:  rgba(37, 211, 102, 0.10);
  --wpp-18:  rgba(37, 211, 102, 0.18);
  --wpp-20:  rgba(37, 211, 102, 0.20);

  /* Amarelo — status / KPI */
  --amarelo:     #EAB308;
  --amarelo-rgb: 234, 179, 8;
  --amarelo-12:  rgba(234, 179, 8, 0.12);
  --amarelo-20:  rgba(234, 179, 8, 0.20);

  /* Azul — status / KPI */
  --azul:     #3B82F6;
  --azul-rgb: 59, 130, 246;
  --azul-12:  rgba(59, 130, 246, 0.12);
  --azul-20:  rgba(59, 130, 246, 0.20);

  /* Roxo — status / badges */
  --roxo:     #8B5CF6;
  --roxo-rgb: 139, 92, 246;
  --roxo-12:  rgba(139, 92, 246, 0.12);
  --roxo-20:  rgba(139, 92, 246, 0.20);


  /* ── OPACIDADES — BRANCO ────────────────────────────────── */
  --w-02:  rgba(255, 255, 255, 0.02);
  --w-03:  rgba(255, 255, 255, 0.03);
  --w-04:  rgba(255, 255, 255, 0.04);
  --w-05:  rgba(255, 255, 255, 0.05);
  --w-06:  rgba(255, 255, 255, 0.06);
  --w-07:  rgba(255, 255, 255, 0.07);
  --w-08:  rgba(255, 255, 255, 0.08);
  --w-12:  rgba(255, 255, 255, 0.12);
  --w-14:  rgba(255, 255, 255, 0.14);
  --w-15:  rgba(255, 255, 255, 0.15);
  --w-20:  rgba(255, 255, 255, 0.20);
  --w-25:  rgba(255, 255, 255, 0.25);
  --w-30:  rgba(255, 255, 255, 0.30);
  --w-35:  rgba(255, 255, 255, 0.35);
  --w-45:  rgba(255, 255, 255, 0.45);
  --w-50:  rgba(255, 255, 255, 0.50);
  --w-60:  rgba(255, 255, 255, 0.60);
  --w-70:  rgba(255, 255, 255, 0.70);
  --w-75:  rgba(255, 255, 255, 0.75);
  --w-90:  rgba(255, 255, 255, 0.90);


  /* ── OPACIDADES — PRETO ─────────────────────────────────── */
  --b-20:  rgba(0, 0, 0, 0.20);
  --b-30:  rgba(0, 0, 0, 0.30);
  --b-40:  rgba(0, 0, 0, 0.40);
  --b-50:  rgba(0, 0, 0, 0.50);
  --b-60:  rgba(0, 0, 0, 0.60);
  --b-65:  rgba(0, 0, 0, 0.65);
  --b-70:  rgba(0, 0, 0, 0.70);
  --b-75:  rgba(0, 0, 0, 0.75);
  --b-95:  rgba(0, 0, 0, 0.95);
  --b-96:  rgba(0, 0, 0, 0.96);


  /* ── TIPOGRAFIA ─────────────────────────────────────────── */
  --font:          'Montserrat', sans-serif;
  --font-fallback: Arial, sans-serif;

  --text-2xs:  8px;
  --text-xs:   9px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;

  --tracking-wide:   1.5px;
  --tracking-wider:  2px;
  --tracking-widest: 3px;
  --tracking-ultra:  4px;


  /* ── ESPAÇAMENTOS ───────────────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   28px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;


  /* ── FORMA ──────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  18px;
  --radius-full:9999px;


  /* ── ELEVAÇÃO / SOMBRAS ─────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow:       0 1px 3px rgba(0, 0, 0, 0.50), 0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.60);
  --shadow-vm:    0 0 6px rgba(215, 40, 43, 0.50);
  --shadow-vm-lg: 0 6px 20px rgba(215, 40, 43, 0.50);
  --shadow-verde: 0 0 6px rgba(34, 197, 94, 0.50);


  /* ── MOTION ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinema: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-fast:  120ms;
  --dur-base:  220ms;    /* ~0.2s */
  --dur-slow:  400ms;    /* ~0.4s */
  --dur-xslow: 700ms;    /* ~0.7s — transições cinematográficas */


  /* ── TABLET (tokens específicos do app) ─────────────────── */
  --barra-h:        44px;
  --barra-bg:       rgba(8, 8, 8, 0.97);
  --offline-bg:     #1A0000;
  --config-overlay: rgba(0, 0, 0, 0.96);
}


/* ── ACESSIBILIDADE ─────────────────────────────────────────
   Respeita a preferência do sistema operacional por menos
   movimento (configur. de acessibilidade no Windows/macOS).
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}