/* ============================================================
   DROGAMART — Design Tokens (CSS Custom Properties)
   Fonte: Manual de Marca Drogamart · v1.0.0
   ============================================================ */

:root {
  /* ---------- Cores institucionais ---------- */
  --dm-red:   #C60000;   /* Pantone 485 C  · C14 M100 Y100 K6  · rgb(198,0,0)  */
  --dm-blue:  #001384;   /* Pantone Reflex Blue C · C100 M77 Y0 K44 · rgb(0,19,132) */
  --dm-black: #0A0A0A;   /* Pantone Black 6 C · C83 M73 Y62 K92 */
  --dm-white: #FFFFFF;

  /* ---------- Escala Vermelho ---------- */
  --dm-red-300: #FF1F1F;
  --dm-red-400: #F50000;
  --dm-red-500: #C60000;
  --dm-red-700: #7A0000;
  --dm-red-900: #520000;

  /* ---------- Escala Azul ---------- */
  --dm-blue-300: #0025F5;
  --dm-blue-400: #001CB8;
  --dm-blue-500: #001384;
  --dm-blue-700: #000C52;
  --dm-blue-900: #000629;

  /* ---------- Neutros ---------- */
  --dm-neutral-0:   #FFFFFF;
  --dm-neutral-50:  #F7F8FA;
  --dm-neutral-100: #EEF0F4;
  --dm-neutral-200: #D9DCE3;
  --dm-neutral-300: #B9BEC9;
  --dm-neutral-400: #8B92A1;
  --dm-neutral-500: #666D7C;
  --dm-neutral-600: #474D59;
  --dm-neutral-700: #2E323B;
  --dm-neutral-800: #1A1D23;
  --dm-neutral-900: #0A0A0A;

  /* ---------- Feedback ---------- */
  --dm-success: #0F8A4D;
  --dm-warning: #E4A200;
  --dm-error:   #C60000;
  --dm-info:    #001CB8;

  /* ---------- Semânticos (tema claro) ---------- */
  --dm-bg:               var(--dm-neutral-0);
  --dm-bg-subtle:        var(--dm-neutral-50);
  --dm-bg-inverse:       var(--dm-blue-500);
  --dm-text:             var(--dm-black);
  --dm-text-muted:       var(--dm-neutral-500);
  --dm-text-inverse:     var(--dm-white);
  --dm-text-brand:       var(--dm-blue-500);
  --dm-border:           var(--dm-neutral-200);
  --dm-border-strong:    var(--dm-blue-500);
  --dm-action:           var(--dm-red-500);
  --dm-action-hover:     var(--dm-red-700);
  --dm-action-alt:       var(--dm-blue-500);
  --dm-action-alt-hover: var(--dm-blue-700);
  --dm-focus:            var(--dm-blue-300);

  /* ---------- Gradientes ---------- */
  --dm-gradient-digital:        linear-gradient(160deg, #001384 0%, #000C52 100%);
  --dm-gradient-digital-radial: radial-gradient(120% 100% at 20% 10%, #001384 0%, #000C52 70%, #000629 100%);
  --dm-gradient-red:            linear-gradient(160deg, #F50000 0%, #7A0000 100%);
  --dm-gradient-brand:          linear-gradient(120deg, #001384 0%, #C60000 100%);


  /* ---------- Vidro (glass / backdrop-filter) ---------- */
  --dm-glass-blur:        blur(20px) saturate(1.8);
  --dm-glass-blur-soft:   blur(12px) saturate(1.4);
  --dm-glass-light:       rgba(255,255,255,.82);   /* sobre fundo claro ou foto */
  --dm-glass-light-solid: rgba(255,255,255,.96);   /* fallback sem backdrop-filter */
  --dm-glass-dark:        rgba(0,19,132,.62);      /* sobre foto/gradiente */
  --dm-glass-dark-solid:  rgba(0,19,132,.94);
  --dm-glass-tint:        rgba(255,255,255,.12);   /* realce dentro do azul */
  --dm-glass-border:      rgba(255,255,255,.60);
  --dm-glass-border-dark: rgba(255,255,255,.22);
  --dm-glass-shadow:      0 8px 32px -8px rgba(0,6,41,.22);

  /* ---------- Tipografia ---------- */
  --dm-font-brand:   "Grift", "Outfit", Inter, system-ui, sans-serif;  /* Outfit = substituta temporária da Grift */
  --dm-font-heading: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm-font-body:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --dm-fw-regular: 400;
  --dm-fw-medium: 500;
  --dm-fw-semibold: 600;
  --dm-fw-bold: 700;
  --dm-fw-extrabold: 800;

  --dm-text-xs:   0.75rem;
  --dm-text-sm:   0.875rem;
  --dm-text-base: 1rem;
  --dm-text-lg:   1.125rem;
  --dm-text-xl:   1.25rem;
  --dm-text-2xl:  1.5rem;
  --dm-text-3xl:  1.875rem;
  --dm-text-4xl:  2.25rem;
  --dm-text-5xl:  3rem;
  --dm-text-6xl:  3.75rem;
  --dm-text-7xl:  4.5rem;

  --dm-lh-tight: 1.1;
  --dm-lh-snug: 1.25;
  --dm-lh-normal: 1.5;
  --dm-lh-relaxed: 1.7;

  --dm-ls-tight: -0.02em;
  --dm-ls-normal: 0;
  --dm-ls-wide: 0.04em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --dm-space-0: 0;    --dm-space-1: 4px;  --dm-space-2: 8px;   --dm-space-3: 12px;
  --dm-space-4: 16px; --dm-space-5: 20px; --dm-space-6: 24px;  --dm-space-8: 32px;
  --dm-space-10: 40px;--dm-space-12: 48px;--dm-space-16: 64px; --dm-space-20: 80px;
  --dm-space-24: 96px;--dm-space-32: 128px;

  /* ---------- Raios ---------- */
  --dm-radius-sm: 6px;
  --dm-radius-md: 12px;
  --dm-radius-lg: 20px;
  --dm-radius-xl: 28px;
  --dm-radius-pill: 999px;
  --dm-radius-full: 50%;

  /* ---------- Sombras ---------- */
  --dm-shadow-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 3px rgba(10,10,10,.08);
  --dm-shadow-md: 0 4px 12px rgba(0,19,132,.10);
  --dm-shadow-lg: 0 12px 32px rgba(0,19,132,.14);
  --dm-shadow-brand: 0 10px 30px rgba(198,0,0,.25);

  /* ---------- Movimento ---------- */
  --dm-duration-fast: 150ms;
  --dm-duration-base: 250ms;
  --dm-duration-slow: 400ms;
  --dm-ease-standard: cubic-bezier(.4,0,.2,1);
  --dm-ease-out: cubic-bezier(0,0,.2,1);

  /* ---------- Layout ---------- */
  --dm-container: 1200px;
  --dm-bp-sm: 640px; --dm-bp-md: 768px; --dm-bp-lg: 1024px;
  --dm-bp-xl: 1280px; --dm-bp-2xl: 1536px;
}

/* ---------- Tema escuro / superfícies azuis ---------- */
[data-theme="dark"], .dm-dark {
  --dm-bg:            var(--dm-blue-700);
  --dm-bg-subtle:     var(--dm-blue-900);
  --dm-bg-inverse:    var(--dm-white);
  --dm-text:          var(--dm-white);
  --dm-text-muted:    rgba(255,255,255,.72);
  --dm-text-inverse:  var(--dm-blue-500);
  --dm-text-brand:    var(--dm-white);
  --dm-border:        rgba(255,255,255,.18);
  --dm-border-strong: var(--dm-white);
  --dm-action:        var(--dm-red-400);
  --dm-action-hover:  var(--dm-red-300);
}