/* ==========================================================================
   LicitaMais — Design tokens
   Única fonte de cores, tipografia, espaçamento, raios, sombras, camadas e
   movimento. Nenhuma cor deve ser escrita fora deste arquivo.
   Contrastes calculados (WCAG 2.2) estão documentados em /licitamais/docs/DECISOES.md.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Paleta oficial da marca (não alterar) ---------------------------- */
  --lm-navy: #042E56;          /* 13,7:1 no branco */
  --lm-blue: #2A4C6E;          /*  8,9:1 no branco */
  --lm-green: #24A66B;         /*  3,1:1 — só ícones, destaques, textos grandes */
  --lm-green-light: #6CC59D;   /*  fundos suaves e estados positivos */
  --lm-gray-blue: #5B718A;     /*  5,0:1 no branco */
  --lm-gray-light: #D3DCDF;    /*  bordas decorativas e divisórias */
  --lm-white: #FFFFFF;
  --lm-gradient: linear-gradient(135deg, #042E56 0%, #24A66B 100%);
  /* Variação do degradê para áreas com texto branco: termina no verde 700
     (5,0:1), mantendo contraste AA em todo o painel. */
  --lm-gradient-panel: linear-gradient(155deg, #042E56 0%, #073A63 42%, #11695E 82%, #1A7F52 100%);

  /* ---- Tons derivados (acessibilidade) ---------------------------------- */
  --lm-navy-900: #021D37;      /* pressionado */
  --lm-navy-50: #EAF0F6;
  --lm-green-700: #1A7F52;     /* 5,0:1 — botões de ação, links, texto verde */
  --lm-green-800: #146642;     /* hover/pressionado do verde */
  --lm-green-50: #EDF8F2;
  --lm-gray-500: #7B8C9E;      /* 3,4:1 — bordas de campos (≥ 3:1 exigido) */
  --lm-gray-100: #F1F4F7;      /* superfície 2 — texto secundário mantém 4,56:1 */
  --lm-page: #F5F7F9;

  --lm-warning: #F0A800;       /* ícones/fundos; texto usa --lm-warning-text */
  --lm-warning-text: #8A6100;
  --lm-warning-icon: #B07D00;
  --lm-warning-50: #FFF6DB;
  --lm-error: #D64545;
  --lm-error-text: #B83232;
  --lm-error-50: #FDECEC;

  /* ---- Cores semânticas (use estas nos componentes) ---------------------- */
  --color-bg: var(--lm-page);
  --color-surface: var(--lm-white);
  --color-surface-2: var(--lm-gray-100);
  --color-surface-brand: var(--lm-navy-50);
  --color-text: #0E2338;
  --color-heading: var(--lm-navy);
  --color-text-muted: var(--lm-gray-blue);
  --color-text-inverse: var(--lm-white);
  /* Texto e detalhes sobre fundos da marca (degradê, azul-marinho) — iguais nos dois temas. */
  --color-on-brand: var(--lm-white);
  --color-on-brand-muted: rgb(255 255 255 / 0.86);
  --color-on-brand-fill: rgb(255 255 255 / 0.12);
  --color-on-brand-line: rgb(255 255 255 / 0.06);
  --color-border: var(--lm-gray-light);
  --color-border-strong: var(--lm-gray-500);
  --color-link: var(--lm-green-700);
  --color-link-hover: var(--lm-green-800);
  --color-focus: var(--lm-green);
  --color-overlay: rgb(2 29 55 / 0.55);
  --color-skeleton: #E4EAEE;
  --color-skeleton-shine: #F2F5F7;
  --color-segment-selected: var(--lm-white);
  /* Gráficos (validados: faixa de luminosidade, daltonismo e contraste — skill dataviz). */
  --viz-1: #2A78D6;  /* série 1 / série única */
  --viz-2: #EB6834;
  --viz-3: #1BAF7A;
  --viz-grid: #E4EAEE;
  --viz-area: rgb(42 120 214 / 0.1);

  --color-primary: var(--lm-navy);
  --color-primary-hover: var(--lm-blue);
  --color-primary-active: var(--lm-navy-900);
  --color-on-primary: var(--lm-white);
  --color-accent: var(--lm-green-700);
  --color-accent-hover: var(--lm-green-800);
  --color-accent-active: #0F5236;
  --color-on-accent: var(--lm-white);
  --color-accent-soft: var(--lm-green-50);
  --color-brand-mark: var(--lm-green);

  --color-success-text: #17714A;
  --color-success-bg: var(--lm-green-50);
  --color-success-border: var(--lm-green-light);
  --color-success-icon: var(--lm-green);
  --color-warning-text: var(--lm-warning-text);
  --color-warning-bg: var(--lm-warning-50);
  --color-warning-border: #F0C24D;
  --color-warning-icon: var(--lm-warning-icon);
  --color-error-text: var(--lm-error-text);
  --color-error-bg: var(--lm-error-50);
  --color-error-border: #E8A0A0;
  --color-error-icon: var(--lm-error);
  --color-info-text: var(--lm-blue);
  --color-info-bg: var(--lm-navy-50);
  --color-info-border: #A9BCCF;
  --color-info-icon: var(--lm-blue);

  /* ---- Tipografia ------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;                              /* 12 */
  --fs-sm: 0.875rem;                             /* 14 */
  --fs-base: 1rem;                               /* 16 — mínimo em campos (iOS não dá zoom) */
  --fs-md: 1.125rem;                             /* 18 */
  --fs-lg: 1.25rem;                              /* 20 */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --fs-2xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);

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

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-caps: 0.06em;

  /* ---- Espaçamento (base 4px) ------------------------------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */
  --sp-20: 5rem;    /* 80 */

  /* ---- Layout ----------------------------------------------------------- */
  --container: 75rem;                         /* 1200 */
  --container-narrow: 30rem;                  /* 480 — formulários */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* 16px no celular */
  --header-h: 3.75rem;                        /* 60 */
  --tap: 2.75rem;                             /* 44 — alvo de toque mínimo */
  --control-h: 3rem;                          /* 48 — altura padrão de campos/botões */
  --control-h-sm: 2.75rem;                    /* 44 — nunca menor que isso */

  /* ---- Áreas seguras (notch, barra de gestos) --------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---- Bordas e raios --------------------------------------------------- */
  --border-w: 1px;
  --border-w-strong: 1.5px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* modais, folhas inferiores */
  --radius-pill: 999px;

  /* ---- Sombras (tingidas de azul-marinho, suaves) ----------------------- */
  --shadow-xs: 0 1px 2px rgb(4 46 86 / 0.06);
  --shadow-sm: 0 1px 3px rgb(4 46 86 / 0.08), 0 1px 2px rgb(4 46 86 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(4 46 86 / 0.10), 0 2px 4px rgb(4 46 86 / 0.04);
  --shadow-lg: 0 20px 44px -12px rgb(4 46 86 / 0.22), 0 4px 10px rgb(4 46 86 / 0.06);
  --focus-ring: 0 0 0 3px var(--color-focus);

  /* ---- Camadas ---------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Movimento -------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Tema escuro --------------------------------------------------------
   Segue a preferência do sistema; data-theme="light|dark" no <html> força um
   tema. Os dois blocos abaixo têm os MESMOS valores — altere ambos juntos
   (CSS puro não permite compartilhar um bloco entre @media e seletor). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0B1724;
    --color-surface: #102235;
    --color-surface-2: #16304A;
    --color-surface-brand: #16304A;
    --color-text: #E8EEF4;
    --color-heading: #F4F7FA;
    --color-text-muted: #A7B6C6;
    --color-text-inverse: #042E56;
    --color-border: #22384F;
    --color-border-strong: #6D87A1;
    --color-link: #6CC59D;
    --color-link-hover: #8FD3B3;
    --color-focus: #6CC59D;
    --color-overlay: rgb(0 8 16 / 0.7);
    --color-skeleton: #1B334C;
    --color-skeleton-shine: #24405C;
    --color-segment-selected: #2A4868;
    --viz-1: #3987E5;
    --viz-2: #D95926;
    --viz-3: #199E70;
    --viz-grid: #22384F;
    --viz-area: rgb(57 135 229 / 0.12);
    --color-primary: #D6E4F2;
    --color-primary-hover: #F0F5FA;
    --color-primary-active: #B9CDE2;
    --color-on-primary: #042E56;
    --color-accent: #6CC59D;
    --color-accent-hover: #8FD3B3;
    --color-accent-active: #53B587;
    --color-on-accent: #042E56;
    --color-accent-soft: #12382C;
    --color-brand-mark: #6CC59D;
    --color-success-text: #8FD3B3;
    --color-success-bg: #12382C;
    --color-success-border: #2C7A57;
    --color-success-icon: #6CC59D;
    --color-warning-text: #F5CF6B;
    --color-warning-bg: #3A2E0B;
    --color-warning-border: #8A6A16;
    --color-warning-icon: #F5CF6B;
    --color-error-text: #F2B8B8;
    --color-error-bg: #3D1A1D;
    --color-error-border: #8E3B3F;
    --color-error-icon: #F08A8A;
    --color-info-text: #9CC3E8;
    --color-info-bg: #16304A;
    --color-info-border: #35587A;
    --color-info-icon: #9CC3E8;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 20px 44px -12px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0B1724;
  --color-surface: #102235;
  --color-surface-2: #16304A;
  --color-surface-brand: #16304A;
  --color-text: #E8EEF4;
  --color-heading: #F4F7FA;
  --color-text-muted: #A7B6C6;
  --color-text-inverse: #042E56;
  --color-border: #22384F;
  --color-border-strong: #6D87A1;
  --color-link: #6CC59D;
  --color-link-hover: #8FD3B3;
  --color-focus: #6CC59D;
  --color-overlay: rgb(0 8 16 / 0.7);
  --color-skeleton: #1B334C;
  --color-skeleton-shine: #24405C;
  --color-segment-selected: #2A4868;
  --viz-1: #3987E5;
  --viz-2: #D95926;
  --viz-3: #199E70;
  --viz-grid: #22384F;
  --viz-area: rgb(57 135 229 / 0.12);
  --color-primary: #D6E4F2;
  --color-primary-hover: #F0F5FA;
  --color-primary-active: #B9CDE2;
  --color-on-primary: #042E56;
  --color-accent: #6CC59D;
  --color-accent-hover: #8FD3B3;
  --color-accent-active: #53B587;
  --color-on-accent: #042E56;
  --color-accent-soft: #12382C;
  --color-brand-mark: #6CC59D;
  --color-success-text: #8FD3B3;
  --color-success-bg: #12382C;
  --color-success-border: #2C7A57;
  --color-success-icon: #6CC59D;
  --color-warning-text: #F5CF6B;
  --color-warning-bg: #3A2E0B;
  --color-warning-border: #8A6A16;
  --color-warning-icon: #F5CF6B;
  --color-error-text: #F2B8B8;
  --color-error-bg: #3D1A1D;
  --color-error-border: #8E3B3F;
  --color-error-icon: #F08A8A;
  --color-info-text: #9CC3E8;
  --color-info-bg: #16304A;
  --color-info-border: #35587A;
  --color-info-icon: #9CC3E8;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 20px 44px -12px rgb(0 0 0 / 0.6);
}

/* Movimento reduzido: transições ficam praticamente instantâneas. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}