/* ==========================================================================
   CHECKPLACE DS — TOKENS (fundações)
   Única fonte de verdade visual do app do repositor, do painel e da landing.

   Duas camadas:
     1) Primitivos  (--p-*)       valores brutos. Só este arquivo os usa.
     2) Semânticos  (--color-*…)  o que os componentes consomem.
   Componentes NUNCA usam hex nem --p-*. Para mudar a identidade, mude aqui.

   Densidade (um sistema, dois "tamanhos"):
     [data-density="compact"]      painel / mouse   (padrão)
     [data-density="comfortable"]  app / toque
   Troca alturas, raio de controles, tamanho de texto de apoio e gutter.

   Breakpoints (variáveis CSS não funcionam em @media, ficam documentados):
     mobile  ≤ 639px | tablet 640–1023px | desktop 1024–1439px | wide ≥ 1440px
   ========================================================================== */

:root {
  /* ---------- 1) PRIMITIVOS ---------- */
  /* Neutros (família azulada do navy da marca) */
  --p-neutral-0:   #FFFFFF;
  --p-neutral-25:  #F6F8FC;
  --p-neutral-50:  #EEF1F8;
  --p-neutral-100: #E6EAF3;
  --p-neutral-200: #DBE2EE;
  --p-neutral-300: #C1CADD;
  --p-neutral-400: #8592AE;   /* 3,12:1 sobre branco — mínimo para bordas de controle */
  --p-neutral-500: #626E8B;   /* 5,09:1 — texto de apoio */
  --p-neutral-600: #3D4760;   /* 9,26:1 — texto secundário */
  --p-navy-900:    #0B1E5E;   /* 15,4:1 — texto principal e marca */

  /* Azul de interação */
  --p-blue-50:  #F0F5FF;
  --p-blue-100: #E1EBFF;
  --p-blue-200: #C2D6FF;
  --p-blue-500: #1166FE;      /* 4,82:1 com texto branco */
  --p-blue-600: #0E4FD1;      /* 6,87:1 — hover e texto de link */
  --p-blue-700: #0B3FAA;

  /* Semânticas de status */
  --p-green-50:  #EEFBF3;  --p-green-200: #BFE8D0;  --p-green-600: #147A4E;  --p-green-700: #0F6340;
  --p-amber-50:  #FBEEDA;  --p-amber-200: #F0D3A0;  --p-amber-500: #C97A12;  --p-amber-700: #7A4704;
  --p-red-50:    #FBE8E5;  --p-red-200:   #F1BDB6;  --p-red-600:   #C6392B;  --p-red-700:   #A3271D;

  /* Visualização de dados (nunca só cor: sempre rótulo, valor ou padrão junto) */
  --p-data-1: #1166FE;   /* azul   */
  --p-data-2: #0B9E88;   /* verde-água */
  --p-data-3: #7A4CE0;   /* violeta */
  --p-data-4: #3D4A66;   /* grafite */
  --p-data-5: #C97A12;   /* âmbar  */
  /* Evento marcado no tempo (12/11/2026: entrega na loja). Fora das 5 cores de série, para nunca ser confundido com uma linha. */
  --p-magenta-50: #FCE9F2;  --p-magenta-600: #B8287A;   /* 5,8:1 sobre branco */

  /* ---------- 2) SEMÂNTICOS: COR ---------- */
  /* Superfícies */
  --color-bg:             var(--p-neutral-25);   /* fundo da página */
  --color-surface:        var(--p-neutral-0);    /* cards, tabelas, modais */
  --color-surface-hover:  var(--p-neutral-50);
  --color-surface-sunken: var(--p-neutral-50);   /* campos desabilitados, trilhos */
  --color-overlay:        rgba(11, 30, 94, .45);

  /* Texto */
  --color-text:            var(--p-navy-900);
  --color-text-secondary:  var(--p-neutral-600);
  --color-text-tertiary:   var(--p-neutral-500);  /* também usado em placeholder */
  --color-text-disabled:   #7A86A2;
  --color-text-on-primary: #FFFFFF;
  --color-text-link:       var(--p-blue-600);
  --color-icon-muted:      #7E8BA8;

  /* Bordas */
  --color-border-subtle:  var(--p-neutral-100);   /* divisórias dentro de blocos */
  --color-border:         var(--p-neutral-200);   /* cards, tabelas */
  --color-border-strong:  var(--p-neutral-300);   /* botões secundários */
  --color-border-control: var(--p-neutral-400);   /* campos, checkbox, radio, switch (WCAG 1.4.11) */

  /* Primária */
  --color-primary:          var(--p-blue-500);
  --color-primary-hover:    var(--p-blue-600);
  --color-primary-pressed:  var(--p-blue-700);
  --color-primary-soft:     var(--p-blue-50);     /* item selecionado, fundo de destaque leve */
  --color-primary-soft-2:   var(--p-blue-100);
  --color-primary-border:   var(--p-blue-200);

  /* Status */
  --color-success:        var(--p-green-600);
  --color-success-hover:  var(--p-green-700);
  --color-success-soft:   var(--p-green-50);
  --color-success-border: var(--p-green-200);

  --color-warning:        var(--p-amber-500);     /* barras, ícones */
  --color-warning-text:   var(--p-amber-700);     /* texto sobre warning-soft */
  --color-warning-soft:   var(--p-amber-50);
  --color-warning-border: var(--p-amber-200);

  --color-danger:         var(--p-red-600);
  --color-danger-hover:   var(--p-red-700);
  --color-danger-text:    var(--p-red-700);
  --color-danger-soft:    var(--p-red-50);
  --color-danger-border:  var(--p-red-200);

  --color-info:        var(--p-blue-600);
  --color-info-soft:   var(--p-blue-50);
  --color-info-border: var(--p-blue-200);

  --color-data-1: var(--p-data-1);
  --color-data-2: var(--p-data-2);
  --color-data-3: var(--p-data-3);
  --color-data-4: var(--p-data-4);
  --color-data-5: var(--p-data-5);
  --color-event:      var(--p-magenta-600);   /* entrega: linha vertical no gráfico, marca no histórico */
  --color-event-soft: var(--p-magenta-50);

  /* ---------- TIPOGRAFIA ---------- */
  /* 'Inter Variable' / 'Plus Jakarta Sans Variable' = arquivos hospedados por nós (fonts.css, desde 12/11/2026).
     'Inter' / 'Plus Jakarta Sans' = reserva, caso a pessoa já tenha a fonte instalada e o arquivo falhe. */
  --font-sans:    'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', 'Inter', system-ui, sans-serif;

  --text-xs:   .75rem;    /* 12 — metadados, legendas. Nada abaixo disso. */
  --text-sm:   .8125rem;  /* 13 — labels, texto de apoio, cabeçalho de tabela */
  --text-md:   .875rem;   /* 14 — corpo no painel */
  --text-base: .9375rem;  /* 15 — corpo no app */
  --text-lg:   1rem;      /* 16 — título de card, corpo em destaque */
  --text-xl:   1.125rem;  /* 18 — título de bloco */
  --text-2xl:  1.25rem;   /* 20 — título de seção */
  --text-3xl:  1.5rem;    /* 24 */
  --text-4xl:  1.75rem;   /* 28 — título de página (desktop) */
  --text-5xl:  2rem;      /* 32 — destaque / números grandes */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;   /* só marca e números de destaque */

  --leading-tight:  1.25;   /* títulos */
  --leading-snug:   1.4;    /* linhas compactas, tabelas */
  --leading-normal: 1.5;    /* texto corrido */
  --tracking-tight: -.01em; /* títulos grandes */

  --measure: 68ch;          /* largura máxima de leitura de parágrafos */

  /* ---------- ESPAÇAMENTO (múltiplos de 4) ---------- */
  --space-2xs: .25rem;   /*  4 — ajuste fino */
  --space-xs:  .5rem;    /*  8 — elementos relacionados */
  --space-sm:  .75rem;   /* 12 — padding interno compacto */
  --space-md:  1rem;     /* 16 — padrão entre elementos */
  --space-lg:  1.5rem;   /* 24 — entre grupos */
  --space-xl:  2rem;     /* 32 — entre seções */
  --space-2xl: 2.5rem;   /* 40 — blocos grandes */
  --space-3xl: 3rem;     /* 48+ — áreas de destaque */

  /* ---------- RAIOS, BORDAS, SOMBRAS ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;    /* cards, tabelas */
  --radius-xl:   16px;    /* modais, bottom sheets */
  --radius-full: 999px;
  --border-width: 1px;

  --shadow-xs:    0 1px 2px rgba(11, 30, 94, .06);                                        /* card clicável em hover */
  --shadow-md:    0 8px 24px rgba(11, 30, 94, .12), 0 2px 6px rgba(11, 30, 94, .06);       /* menu, popover */
  --shadow-lg:    0 24px 56px rgba(11, 30, 94, .22), 0 4px 12px rgba(11, 30, 94, .08);     /* modal, drawer */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);              /* anel duplo: legível em qualquer fundo */

  /* ---------- CAMADAS ---------- */
  --z-sticky:   10;
  --z-nav:      20;
  --z-dropdown: 30;
  --z-modal:    60;
  --z-toast:    80;
  --z-tooltip:  90;

  /* ---------- MOVIMENTO ---------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);

  /* ---------- LAYOUT ---------- */
  --content-max:        1180px;   /* páginas de leitura/formulário */
  --content-max-wide:   1620px;   /* listagens e tabelas (decisão atual do painel: usar a largura) */
  --sidebar-w:          224px;
  --sidebar-w-collapsed: 64px;
  --app-max-w:          480px;    /* app do repositor em telas largas */
  --bp-sm: 640px;  --bp-md: 1024px;  --bp-lg: 1440px;   /* referência para JS */
}

/* ---------- DENSIDADE ---------- */
:root,
[data-density="compact"] {
  --control-h-sm: 30px;
  --control-h:    36px;
  --control-h-lg: 44px;
  --control-px:   .75rem;
  --radius-control: var(--radius-md);
  --text-body:    var(--text-md);
  --text-input:   var(--text-md);
  --text-page-title: var(--text-4xl);
  --row-py:       .75rem;
  --page-gutter:  1.75rem;
  --icon-btn:     36px;
}

[data-density="comfortable"] {
  --control-h-sm: 40px;
  --control-h:    48px;
  --control-h-lg: 52px;
  --control-px:   .875rem;
  --radius-control: var(--radius-lg);
  --text-body:    var(--text-base);
  --text-input:   var(--text-lg);     /* 16px: o iOS não dá zoom ao focar */
  --text-page-title: var(--text-3xl);
  --row-py:       .875rem;
  --page-gutter:  1rem;
  --icon-btn:     44px;
}

/* Dispositivo de toque: alvos mínimos de 44px mesmo no painel */
@media (pointer: coarse) {
  :root,
  [data-density="compact"] {
    --control-h-sm: 36px;
    --control-h:    44px;
    --icon-btn:     44px;
  }
}

/* Telas pequenas: gutter menor no painel */
@media (max-width: 639px) {
  :root,
  [data-density="compact"] { --page-gutter: 1rem; --text-page-title: var(--text-3xl); }
}