/* ============================================================
   variables.css — Design tokens
   Todas as cores, espaçamentos, tipografia e sombras
   centralizadas aqui. Edite aqui para mudar o tema inteiro.
   ============================================================ */

:root {

  /* ─── Paleta de cores ─── */
  --color-brand-blue:       #0D47A1;
  --color-brand-blue-mid:   #1565C0;
  --color-brand-blue-light: #1976D2;
  --color-brand-blue-pale:  #E3F2FD;
  --color-brand-yellow:     #FFD600;
  --color-brand-dark:       #0A2647;

  /* Cores de texto */
  --color-text-primary:     #1A1A2E;
  --color-text-secondary:   #555;
  --color-text-muted:       #999;
  --color-text-hint:        #bbb;
  --color-text-white:       #fff;
  --color-text-white-muted: rgba(255, 255, 255, 0.6);

  /* Cores de fundo */
  --color-bg-page:          #F8FAFB;
  --color-bg-white:         #fff;
  --color-bg-section:       #F0F4FF;
  --color-bg-dark:          #0A2647;

  /* Bordas */
  --color-border:           #E8EDF5;
  --color-border-dark:      rgba(255, 255, 255, 0.1);

  /* Semânticas */
  --color-success:          #2E7D32;
  --color-success-bg:       #E8F5E9;
  --color-danger:           #C62828;
  --color-instagram:        #E1306C;

  /* ─── Tipografia ─── */
  --font-body:              'DM Sans', system-ui, sans-serif;
  --font-heading:           'DM Sans', system-ui, sans-serif;

  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  15px;
  --font-size-md:    17px;
  --font-size-lg:    20px;
  --font-size-xl:    24px;
  --font-size-2xl:   28px;
  --font-size-3xl:   36px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;

  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  /* ─── Espaçamentos ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ─── Bordas arredondadas ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Sombras ─── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);

  /* ─── Transições ─── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ─── Layout ─── */
  --container-width:   1100px;
  --header-height:     64px;
  --category-bar-h:    42px;
  --header-total-h:    calc(var(--header-height) + var(--category-bar-h));

  /* ─── Z-index ─── */
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    300;
}