/* ============================================================
   Altec Sistemas — Color tokens
   Fonte da verdade: Figma · coleção "Altec NextCaixa — Tokens".
   Nomes CANÔNICOS do Figma (--color-<grupo>-<nome>) são os tokens
   primários; logo abaixo, um bloco de ALIASES mapeia os nomes usados
   pelos componentes (compat) para os canônicos.
   Modo Light em :root · Modo Dark em [data-theme="dark"].

   ⚠ Acessibilidade:
     · NUNCA texto branco sobre o brand turquesa #17b3bf (fill/ícone/
       foco/anel apenas).
     · Ação #129faa carrega branco (3,2:1 — AA p/ texto grande/peso 800);
       use #108089 (--turquoise-action-strong) p/ texto pequeno (4,7:1).
     · Aviso #f6a74a usa TEXTO ESCURO (#3a3f4d).
   ============================================================ */
:root {
  /* ---- color / brand ----------------------------------- */
  --color-brand-turquesa: #17b3bf;        /* marca / fill / ícone / foco / anel (não p/ texto branco) */
  --color-brand-turquesa-dark: #129faa;   /* base de ação / CTA */
  --color-brand-roxo: #56485b;
  --color-brand-lavanda: #a098ae;
  --color-brand-cinza: #9a9fae;
  --color-brand-turquesa-tint: #def1f3;
  --color-brand-amarelo: #edc42e;         /* contraste SOBRE peças roxas — não é aviso de UI */
  --color-brand-orange: #fc802b;
  --color-brand-roxo-ui: #63537a;

  /* ---- color / action ---------------------------------- */
  --color-action-primary: #129faa;
  --color-action-hover: #158d96;
  --color-action-pressed: #147c84;
  --color-action-strong: #108089;         /* AA 4,7:1 — texto pequeno sobre ação */
  --color-action-on-action: #ffffff;

  /* ---- color / text ------------------------------------ */
  --color-text-strong: #3a3f4d;           /* corpo (10,5:1) */
  --color-text-default: #9a9fae;          /* rótulo/secundário leve */
  --color-text-default-light: #f3f4f7;    /* texto sobre superfície escura */
  --color-text-default-dark: #6e7180;     /* secundário (4,8:1) */

  /* ---- color / surface --------------------------------- */
  --color-surface-light: #f4f4f6;         /* fundo de tela */
  --color-surface-tint-red: #fff5f5;
  --color-surface-sunken-turquesa: #c4dbdc;
  --color-surface-raised: #ffffff;        /* cards / elevado */
  --color-surface-sunken-roxo: #eeecf0;
  --color-surface-dark: #423546;          /* painel escuro (texto branco 11,5:1) */
  --color-surface-strong: #1a1d26;        /* superfície de alto contraste */
  --color-surface-card-alt: #f8f8fa;      /* preenchimento de item card */

  /* ---- color / overlay (scrim / divisor de tela) ------- */
  --color-overlay-scrim: rgba(154, 159, 174, 0.40);  /* 9A9FAE @ 40% — divisor por trás de modais/drawers */
  --overlay-blur: 15px;                               /* background blur uniforme do divisor */

  /* ---- color / border ---------------------------------- */
  --color-border-default: #e7e8ec;
  --color-border-card: #dad4e4;
  --color-border-strong: #d6d8de;

  /* ---- color / accent ---------------------------------- */
  --color-accent-turq-tint: #e3f4f5;
  --color-accent-roxo-tint: #eceaf1;

  /* ---- color / card · fill (preenchimentos) ------------ */
  /* Paleta de 9 famílias × 3 níveis (claro → médio). Fonte: Figma "Cards (Fill)". */
  --color-card-fill-amarelo-1: #fffdd3;  --color-card-fill-amarelo-2: #fcf8b1;  --color-card-fill-amarelo-3: #e6e289;
  --color-card-fill-laranja-1: #fff2de;  --color-card-fill-laranja-2: #ffe7c2;  --color-card-fill-laranja-3: #ffd595;
  --color-card-fill-vermelho-1: #ffe4e3; --color-card-fill-vermelho-2: #ffc9c7; --color-card-fill-vermelho-3: #eca2a0;
  --color-card-fill-azul-1: #e9fbff;     --color-card-fill-azul-2: #d7fcff;     --color-card-fill-azul-3: #d2ddec;
  --color-card-fill-verde-1: #f3fce6;    --color-card-fill-verde-2: #cdf4e0;    --color-card-fill-verde-3: #aed6c2;
  --color-card-fill-rosa-1: #ffebff;     --color-card-fill-rosa-2: #ffd0ff;     --color-card-fill-rosa-3: #dcaadc;
  --color-card-fill-roxo-1: #f8ecff;     --color-card-fill-roxo-2: #e8d2f6;     --color-card-fill-roxo-3: #c1afcc;
  --color-card-fill-marrom-1: #f1e6e6;   --color-card-fill-marrom-2: #decaca;   --color-card-fill-marrom-3: #ae9d9d;
  --color-card-fill-cinza-1: #f3f3f3;    --color-card-fill-cinza-2: #e0e0e0;    --color-card-fill-cinza-3: #c2c2c2;

  /* ---- color / card · stroke (contornos) --------------- */
  /* Mesmas 9 famílias × 3 níveis (vivo → escuro). Fonte: Figma "Cards (Stroke)". */
  --color-card-stroke-amarelo-1: #ffee00;  --color-card-stroke-amarelo-2: #dfd748;  --color-card-stroke-amarelo-3: #c4b811;
  --color-card-stroke-laranja-1: #ffc66e;  --color-card-stroke-laranja-2: #edaf4e;  --color-card-stroke-laranja-3: #d38200;
  --color-card-stroke-vermelho-1: #ff8580; --color-card-stroke-vermelho-2: #df6560; --color-card-stroke-vermelho-3: #d00000;
  --color-card-stroke-azul-1: #59dbff;     --color-card-stroke-azul-2: #61f2ff;     --color-card-stroke-azul-3: #5c98cf;
  --color-card-stroke-verde-1: #b4f654;    --color-card-stroke-verde-2: #34ed8e;    --color-card-stroke-verde-3: #44986e;
  --color-card-stroke-rosa-1: #ff9bff;     --color-card-stroke-rosa-2: #d776d7;     --color-card-stroke-rosa-3: #a052a0;
  --color-card-stroke-roxo-1: #dea4ff;     --color-card-stroke-roxo-2: #b574de;     --color-card-stroke-roxo-3: #713c92;
  --color-card-stroke-marrom-1: #d2a4a4;   --color-card-stroke-marrom-2: #ba7c7c;   --color-card-stroke-marrom-3: #624848;
  --color-card-stroke-cinza-1: #c4c1c1;    --color-card-stroke-cinza-2: #a0a0a0;    --color-card-stroke-cinza-3: #6a6a6a;


  /* ---- color / feedback -------------------------------- */
  --color-feedback-success: #348253;          /* texto branco */
  --color-feedback-success-light: #45ad6f;
  --color-feedback-success-tint: #e7f5ee;
  --color-feedback-warning-light: #f6a74a;    /* aviso de UI — TEXTO ESCURO #3a3f4d */
  --color-feedback-warning-dark: #b97c34;
  --color-feedback-warning-tint: #fff2de;
  --color-feedback-warning-dark-tint: #f5ede3;
  --color-feedback-error: #923232;            /* texto branco */
  --color-feedback-alert: #de6a6a;            /* vermelho suave */
  --color-feedback-error-tint: #fbe8e8;
  --color-feedback-info: #a098ae;             /* lavanda — apoio/baixo contraste */
  --color-feedback-info-tint: #f6f5f7;
  --color-feedback-on-warning: #3a3f4d;       /* texto escuro sobre o aviso */

  /* ---- color / component ------------------------------- */
  --color-pill-ring: #17b3bf;             /* anel da CategoryPill selecionada */

  /* ---- color / status · venda -------------------------- */
  --color-status-venda-aberta: #2f80ed;
  --color-status-venda-reservada: #3c3c3c;
  --color-status-venda-em-producao: #749983;
  --color-status-venda-pronto: #197d80;
  --color-status-venda-em-pagamento: #7e57c2;
  --color-status-venda-pagamento-ok: #38a2db;
  --color-status-venda-fiscal-ok: #979797;
  --color-status-venda-em-fechamento: #c76b00;
  --color-status-venda-saiu-entrega: #c2569b;
  --color-status-venda-encerrada: #52406c;
  --color-status-venda-cancelada: #c8463c;
  --color-status-venda-cancelada-pos-envio: #7a1e1e;

  /* ---- color / status · item --------------------------- */
  --color-status-item-adicionado: #2f80ed;
  --color-status-item-em-producao: #749983;
  --color-status-item-aguardando-impressao: #817745;
  --color-status-item-finalizado: #52406c;
  --color-status-item-cancelado: #c8463c;
  --color-status-item-cancelado-antes: #7a1e1e;

  /* ============================================================
     ALIASES — nomes usados pelos componentes → tokens canônicos.
     Usam var(), então seguem o modo escuro automaticamente.
     ============================================================ */
  /* brand */
  --turquoise: var(--color-brand-turquesa);
  --turquoise-dark: var(--color-brand-turquesa-dark);
  --purple: var(--color-brand-roxo);
  --purple-ui: var(--color-brand-roxo-ui);
  --lavender: var(--color-brand-lavanda);
  --yellow: var(--color-brand-amarelo);
  --orange: var(--color-brand-orange);
  --turquoise-tint: var(--color-brand-turquesa-tint);
  --altec-turquoise: var(--color-brand-turquesa);
  --altec-purple: var(--color-brand-roxo);
  --altec-lavender: var(--color-brand-lavanda);
  --altec-yellow: var(--color-brand-amarelo);
  --altec-orange: var(--color-brand-orange);

  /* action */
  --turquoise-action: var(--color-action-primary);
  --turquoise-hover: var(--color-action-hover);
  --turquoise-pressed: var(--color-action-pressed);
  --turquoise-action-strong: var(--color-action-strong);
  --action-primary: var(--color-action-primary);
  --action-primary-hover: var(--color-action-hover);
  --action-primary-pressed: var(--color-action-pressed);
  --action-fill: var(--color-action-primary);
  --action-fill-hover: var(--color-action-hover);
  --action-fill-pressed: var(--color-action-pressed);
  --action-turquoise: var(--color-action-primary);
  --action-turquoise-hover: var(--color-action-hover);
  --action-turquoise-pressed: var(--color-action-pressed);
  --action-secondary: var(--color-brand-roxo);
  --action-destructive: var(--color-feedback-alert);          /* botão destrutivo = coral #de6a6a (Figma) */
  --action-destructive-hover: #d25a5a;
  --action-destructive-pressed: #c44d4d;
  --action-disabled: #cccfd6;                                 /* botão desabilitado = cinza-azulado frio (Figma) */
  --text-on-action: var(--color-action-on-action);
  --text-on-brand: #ffffff;
  --focus-ring: var(--color-brand-turquesa);

  /* text */
  --ink-strong: var(--color-text-strong);
  --ink-secondary: var(--color-text-default-dark);
  --ink-muted: var(--color-text-default);
  --text-default-light: var(--color-text-default-light);
  --text-strong: var(--color-text-strong);
  --text-secondary: var(--color-text-default-dark);
  --text-placeholder: var(--color-text-default);

  /* surface */
  --surface-screen: var(--color-surface-light);
  --surface-card: var(--color-surface-raised);
  --surface-card-alt: var(--color-surface-card-alt);
  --surface-sunken-turquesa: var(--color-surface-sunken-turquesa);
  --surface-sunken-roxo: var(--color-surface-sunken-roxo);
  --surface-dark: var(--color-surface-dark);
  --surface-strong: var(--color-surface-strong);
  --bg-app: var(--color-surface-light);
  --bg-card: var(--color-surface-raised);
  --bg-card-item: var(--color-surface-card-alt);

  /* overlay / scrim — divisor de tela atrás de modais */
  --overlay-scrim: var(--color-overlay-scrim);

  /* border */
  --border: var(--color-border-default);
  --border-default: var(--color-border-default);
  --border-card: var(--color-border-card);
  --border-strong: var(--color-border-strong);

  /* accent */
  --accent-turq-tint: var(--color-accent-turq-tint);
  --accent-roxo-tint: var(--color-accent-roxo-tint);

  /* card · fill (preenchimentos) */
  --card-fill-amarelo-1: var(--color-card-fill-amarelo-1);   --card-fill-amarelo-2: var(--color-card-fill-amarelo-2);   --card-fill-amarelo-3: var(--color-card-fill-amarelo-3);
  --card-fill-laranja-1: var(--color-card-fill-laranja-1);   --card-fill-laranja-2: var(--color-card-fill-laranja-2);   --card-fill-laranja-3: var(--color-card-fill-laranja-3);
  --card-fill-vermelho-1: var(--color-card-fill-vermelho-1); --card-fill-vermelho-2: var(--color-card-fill-vermelho-2); --card-fill-vermelho-3: var(--color-card-fill-vermelho-3);
  --card-fill-azul-1: var(--color-card-fill-azul-1);         --card-fill-azul-2: var(--color-card-fill-azul-2);         --card-fill-azul-3: var(--color-card-fill-azul-3);
  --card-fill-verde-1: var(--color-card-fill-verde-1);       --card-fill-verde-2: var(--color-card-fill-verde-2);       --card-fill-verde-3: var(--color-card-fill-verde-3);
  --card-fill-rosa-1: var(--color-card-fill-rosa-1);         --card-fill-rosa-2: var(--color-card-fill-rosa-2);         --card-fill-rosa-3: var(--color-card-fill-rosa-3);
  --card-fill-roxo-1: var(--color-card-fill-roxo-1);         --card-fill-roxo-2: var(--color-card-fill-roxo-2);         --card-fill-roxo-3: var(--color-card-fill-roxo-3);
  --card-fill-marrom-1: var(--color-card-fill-marrom-1);     --card-fill-marrom-2: var(--color-card-fill-marrom-2);     --card-fill-marrom-3: var(--color-card-fill-marrom-3);
  --card-fill-cinza-1: var(--color-card-fill-cinza-1);       --card-fill-cinza-2: var(--color-card-fill-cinza-2);       --card-fill-cinza-3: var(--color-card-fill-cinza-3);

  /* card · stroke (contornos) */
  --card-stroke-amarelo-1: var(--color-card-stroke-amarelo-1);   --card-stroke-amarelo-2: var(--color-card-stroke-amarelo-2);   --card-stroke-amarelo-3: var(--color-card-stroke-amarelo-3);
  --card-stroke-laranja-1: var(--color-card-stroke-laranja-1);   --card-stroke-laranja-2: var(--color-card-stroke-laranja-2);   --card-stroke-laranja-3: var(--color-card-stroke-laranja-3);
  --card-stroke-vermelho-1: var(--color-card-stroke-vermelho-1); --card-stroke-vermelho-2: var(--color-card-stroke-vermelho-2); --card-stroke-vermelho-3: var(--color-card-stroke-vermelho-3);
  --card-stroke-azul-1: var(--color-card-stroke-azul-1);         --card-stroke-azul-2: var(--color-card-stroke-azul-2);         --card-stroke-azul-3: var(--color-card-stroke-azul-3);
  --card-stroke-verde-1: var(--color-card-stroke-verde-1);       --card-stroke-verde-2: var(--color-card-stroke-verde-2);       --card-stroke-verde-3: var(--color-card-stroke-verde-3);
  --card-stroke-rosa-1: var(--color-card-stroke-rosa-1);         --card-stroke-rosa-2: var(--color-card-stroke-rosa-2);         --card-stroke-rosa-3: var(--color-card-stroke-rosa-3);
  --card-stroke-roxo-1: var(--color-card-stroke-roxo-1);         --card-stroke-roxo-2: var(--color-card-stroke-roxo-2);         --card-stroke-roxo-3: var(--color-card-stroke-roxo-3);
  --card-stroke-marrom-1: var(--color-card-stroke-marrom-1);     --card-stroke-marrom-2: var(--color-card-stroke-marrom-2);     --card-stroke-marrom-3: var(--color-card-stroke-marrom-3);
  --card-stroke-cinza-1: var(--color-card-stroke-cinza-1);       --card-stroke-cinza-2: var(--color-card-stroke-cinza-2);       --card-stroke-cinza-3: var(--color-card-stroke-cinza-3);


  /* feedback */
  --success: var(--color-feedback-success);
  --success-light: var(--color-feedback-success-light);
  --warning: var(--color-feedback-warning-light);
  --warning-dark: var(--color-feedback-warning-dark);
  --danger: var(--color-feedback-error);
  --info: var(--color-feedback-info);
  --success-tint: var(--color-feedback-success-tint);
  --warning-tint: var(--color-feedback-warning-tint);
  --warning-dark-tint: var(--color-feedback-warning-dark-tint);
  --danger-tint: var(--color-feedback-error-tint);
  --info-tint: var(--color-feedback-info-tint);
  --field-error: var(--color-feedback-alert);
  --text-on-warning: var(--color-feedback-on-warning);

  /* component */
  --pill-ring: var(--color-pill-ring);

  /* status · venda (PT — consumidos pelo StatusCard do bundle) */
  --status-open: var(--color-status-venda-aberta);
  --status-producing: var(--color-status-venda-em-producao);
  --status-ready: var(--color-status-venda-pronto);
  --status-paying: var(--color-status-venda-em-pagamento);
  --status-paid: var(--color-status-venda-pagamento-ok);
  --status-delivery: var(--color-status-venda-saiu-entrega);
  --status-closing: var(--color-status-venda-em-fechamento);
  --status-closed: var(--color-status-venda-encerrada);
  --status-canceled: var(--color-status-venda-cancelada);
  --status-canceled-late: var(--color-status-venda-cancelada-pos-envio);
  --status-reservada: var(--color-status-venda-reservada);
  --status-fiscal-ok: var(--color-status-venda-fiscal-ok);
  --status-aberta: var(--color-status-venda-aberta);
  --status-em-producao: var(--color-status-venda-em-producao);
  --status-pronto: var(--color-status-venda-pronto);
  --status-em-pagamento: var(--color-status-venda-em-pagamento);
  --status-pagamento-ok: var(--color-status-venda-pagamento-ok);
  --status-saiu-entrega: var(--color-status-venda-saiu-entrega);
  --status-em-fechamento: var(--color-status-venda-em-fechamento);
  --status-encerrada: var(--color-status-venda-encerrada);
  --status-cancelada: var(--color-status-venda-cancelada);
  --status-cancelada-pos: var(--color-status-venda-cancelada-pos-envio);

  /* status · item */
  --status-item-adicionado: var(--color-status-item-adicionado);
  --status-item-em-producao: var(--color-status-item-em-producao);
  --status-item-aguardando-impressao: var(--color-status-item-aguardando-impressao);
  --status-item-finalizado: var(--color-status-item-finalizado);
  --status-item-cancelado: var(--color-status-item-cancelado);
  --status-item-cancelado-antes: var(--color-status-item-cancelado-antes);

  /* button weight (tipografia) */
  --btn-weight: var(--fw-extrabold);
}

/* ============================================================
   MODO ESCURO — sobrescreve só os tokens canônicos que mudam.
   Os aliases acima (var()) seguem automaticamente.
   ============================================================ */
[data-theme="dark"] {
  /* brand / action */
  --color-action-primary: #17b3bf;
  --color-action-hover: #26c6d2;
  --color-action-pressed: #2bd1de;

  /* text */
  --color-text-strong: #f3f4f7;
  --color-text-default: #c7cad6;
  --color-text-default-light: #f3f4f7;
  --color-text-default-dark: #9a9fae;

  /* surface */
  --color-surface-light: #14161c;
  --color-surface-tint-red: #fff5f5;
  --color-surface-sunken-turquesa: #14161c;
  --color-surface-raised: #1d2029;
  --color-surface-sunken-roxo: #181b22;
  --color-surface-dark: #ffffff;
  --color-surface-strong: #e7e8ec;
  --color-surface-card-alt: #181b22;
  --color-overlay-scrim: rgba(6, 8, 13, 0.58);  /* scrim mais escuro no modo dark */

  /* border */
  --color-border-default: #2a2e39;
  --color-border-card: #2a2e39;
  --color-border-strong: #3a3f4d;

  /* accent */
  --color-accent-turq-tint: #11343a;
  --color-accent-roxo-tint: #241f2e;

  /* feedback */
  --color-feedback-success-tint: #16271f;
  --color-feedback-warning-tint: #2a2113;
  --color-feedback-warning-dark-tint: #f5ede3;
  --color-feedback-error-tint: #2c1717;
  --color-feedback-info: #bfb4d3;
  --color-feedback-info-tint: #e0dfe2;
}