/* ============================================================
   Tataendy Design Tokens
   ============================================================
   Tokens centralizados — cores, tipografia, espaçamentos.
   Cada produto da Tataendy (Porã, Arapuca, Pytá) consome estes
   tokens. Mudou aqui, mudou em todos os produtos.
   ============================================================ */

:root {
  /* ---- Paleta Tataendy ----------------------------------- */
  /* Primárias */
  --color-navy:           #0F1F3D;  /* Marinho — estrutura, fundo principal */
  --color-navy-mid:       #1C3356;  /* Marinho médio — superfícies secundárias */
  --color-navy-light:     #2A4A6E;  /* Marinho suave — bordas, separadores */
  --color-night:          #080F1E;  /* Noite — fundo máximo escuro */

  --color-copper:         #B87333;  /* Cobre — ação, destaque, identidade */
  --color-copper-light:   #D4956A;  /* Cobre claro — variações, hover */

  --color-cream:          #F5F3F0;  /* Creme — texto em escuro, fundo claro */
  --color-cream-light:    #FFFFFF;  /* Branco puro — cards em modo claro */

  --color-fog:            #7A9BB5;  /* Azul névoa — texto de suporte */

  /* Semânticas */
  --color-success:        #4ADE80;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;
  --color-info:           #60A5FA;

  /* ---- Aplicação em modo escuro (preferencial) ---------- */
  --bg-primary:           var(--color-navy);
  --bg-secondary:         var(--color-navy-mid);
  --bg-elevated:          var(--color-navy-mid);
  --bg-input:             var(--color-night);

  --text-primary:         var(--color-cream);
  --text-secondary:       var(--color-fog);
  --text-tertiary:        #5A7A95;

  --accent:               var(--color-copper);
  --accent-hover:         var(--color-copper-light);

  --border:               var(--color-navy-light);
  --border-subtle:        rgba(255, 255, 255, 0.06);

  /* ---- Tipografia ---------------------------------------- */
  --font-primary:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Escala de tamanhos (rem) */
  --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 */

  /* Pesos */
  --weight-light:         300;
  --weight-normal:        400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* Line-heights */
  --leading-tight:        1.2;
  --leading-snug:         1.4;
  --leading-normal:       1.6;
  --leading-relaxed:      1.7;

  /* Tracking */
  --tracking-tighter:     -0.02em;
  --tracking-tight:       -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.03em;
  --tracking-wider:       0.06em;
  --tracking-widest:      0.10em;

  /* ---- Espaçamentos (escala 4px) ------------------------ */
  --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 */

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

  --border-width:         1px;

  /* ---- Sombras (sutis, estilo Claude.ai) ----------------- */
  --shadow-sm:            0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-accent:        0 0 0 3px rgba(184, 115, 51, 0.2);

  /* ---- Transições ---------------------------------------- */
  --duration-fast:        100ms;
  --duration-base:        200ms;
  --duration-slow:        300ms;
  --ease:                 cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ------------------------------------------- */
  --container-max:        1280px;
  --sidebar-width:        260px;
  --header-height:        64px;
  --z-modal:              50;
  --z-toast:              60;
  --z-overlay:            40;
  --z-dropdown:           30;
  --z-header:             20;
}

/* ---- Modo claro (alternativa, ativa com [data-theme="light"]) */
[data-theme="light"] {
  --bg-primary:           var(--color-cream);
  --bg-secondary:         var(--color-cream-light);
  --bg-elevated:          var(--color-cream-light);
  --bg-input:             var(--color-cream-light);

  --text-primary:         var(--color-navy);
  --text-secondary:       var(--color-navy-light);
  --text-tertiary:        #6B7C95;

  --border:               #D9D5CF;
  --border-subtle:        rgba(15, 31, 61, 0.08);

  --shadow-sm:            0 1px 2px 0 rgba(15, 31, 61, 0.05);
  --shadow-md:            0 4px 6px -1px rgba(15, 31, 61, 0.08);
  --shadow-lg:            0 10px 15px -3px rgba(15, 31, 61, 0.1);
}