/* =========================================================
   DESIGN SYSTEM — VARIÁVEIS CSS
   Cães de Alerta Médico | v1.0
   ========================================================= */

:root {

  /* ---- CORES PRIMÁRIAS ---- */
  --color-navy:          #0B1D3A;   /* Azul marinho profundo */
  --color-navy-mid:      #112240;   /* Azul escuro médio */
  --color-blue:          #1A3F7A;   /* Azul institucional */
  --color-blue-mid:      #1E5799;   /* Azul vibrante */
  --color-blue-light:    #2D7DD2;   /* Azul claro */
  --color-blue-pale:     #EBF3FB;   /* Azul muito claro (bg) */

  /* ---- CORES DE DESTAQUE ---- */
  --color-red:           #B91C1C;   /* Vermelho premium */
  --color-red-soft:      #DC2626;   /* Vermelho suave */
  --color-red-light:     #FEE2E2;   /* Vermelho palido (bg) */
  --color-gold:          #C9A84C;   /* Dourado elegante */
  --color-gold-light:    #FFF8E7;   /* Dourado pálido (bg) */

  /* ---- NEUTROS ---- */
  --color-white:         #FFFFFF;
  --color-off-white:     #F8FAFC;
  --color-gray-50:       #F8FAFC;
  --color-gray-100:      #F1F5F9;
  --color-gray-200:      #E2E8F0;
  --color-gray-300:      #CBD5E1;
  --color-gray-400:      #94A3B8;
  --color-gray-500:      #64748B;
  --color-gray-600:      #475569;
  --color-gray-700:      #334155;
  --color-gray-800:      #1E293B;
  --color-gray-900:      #0F172A;

  /* ---- TIPOGRAFIA ---- */
  --font-heading:        'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:           'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-accent:         'Playfair Display', Georgia, serif;

  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */
  --text-7xl:   4.5rem;     /*  72px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ---- ESPAÇAMENTOS ---- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  --section-py: clamp(4rem, 8vw, 7rem);   /* padding vertical seção */
  --container:  1200px;
  --container-lg: 1400px;
  --container-sm: 800px;

  /* ---- BORDAS ---- */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ---- SOMBRAS ---- */
  --shadow-xs:  0 1px 2px rgba(11, 29, 58, 0.05);
  --shadow-sm:  0 1px 3px rgba(11, 29, 58, 0.08), 0 1px 2px rgba(11, 29, 58, 0.06);
  --shadow-md:  0 4px 6px rgba(11, 29, 58, 0.07), 0 2px 4px rgba(11, 29, 58, 0.06);
  --shadow-lg:  0 10px 15px rgba(11, 29, 58, 0.08), 0 4px 6px rgba(11, 29, 58, 0.05);
  --shadow-xl:  0 20px 25px rgba(11, 29, 58, 0.10), 0 8px 10px rgba(11, 29, 58, 0.06);
  --shadow-2xl: 0 25px 50px rgba(11, 29, 58, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(11, 29, 58, 0.08);
  --shadow-card: 0 4px 24px rgba(11, 29, 58, 0.10);
  --shadow-card-hover: 0 12px 40px rgba(11, 29, 58, 0.18);

  /* ---- TRANSIÇÕES ---- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z-INDEX ---- */
  --z-base:     1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---- GRADIENTES ---- */
  --gradient-navy:  linear-gradient(135deg, #0B1D3A 0%, #1A3F7A 100%);
  --gradient-blue:  linear-gradient(135deg, #1A3F7A 0%, #2D7DD2 100%);
  --gradient-hero:  linear-gradient(180deg, rgba(11,29,58,0.55) 0%, rgba(11,29,58,0.82) 100%);
  --gradient-card:  linear-gradient(180deg, rgba(11,29,58,0) 50%, rgba(11,29,58,0.85) 100%);
}