/* Copiado (só leitura) de Dashboard-Dropshipping/web/src/styles/tokens.css para manter o visual igual ao fdjm. */
/* Tokens visuais do dashboard FDJM.
 *
 * A estrutura, o espaçamento e a anatomia dos componentes seguem o layout do
 * DropScale; a paleta é a do FDJM (backend/frontend/theme.py) e é a mesma que
 * o Streamlit usa hoje, para as duas interfaces não divergirem enquanto a
 * migração decorre. Nenhum asset, texto ou código do DropScale foi copiado.
 */

:root {
  color-scheme: dark;

  /* Elevação por luminosidade: cada camada é ~3-5% mais clara que a anterior
   * (base -> superfície -> elevada -> sobreposição). A profundidade lê-se
   * mesmo com movimento reduzido — nada aqui depende de animação. */
  --bg: #060a14;
  --bg-soft: #090f1c;
  --surface: #0e1525;
  --surface-2: #131c30;
  --surface-3: #1a2540;
  --border: rgba(148, 169, 208, 0.11);
  --border-strong: rgba(148, 169, 208, 0.24);
  --control-border: #5f7396;
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 46%);
  --glass: rgba(9, 15, 28, 0.72);
  --scrim: rgba(3, 7, 16, 0.62);
  --hover-fill: rgba(148, 169, 208, 0.08);
  --icon-well: rgba(148, 169, 208, 0.09);

  --text: #eaf0fc;
  --text-muted: #a3b3cf;
  --text-faint: #7a8eae;

  --brand: #5b9bff;
  --brand-strong: #3b82f6;
  --brand-soft: rgba(91, 155, 255, 0.14);
  --brand-line: rgba(91, 155, 255, 0.4);
  --brand-grad: linear-gradient(135deg, #5b9bff 0%, #8b7bff 100%);
  --on-brand: #060a14;

  --positive: #22c55e;
  --warning: #f59e0b;
  --negative: #f87171;
  --neutral: #94a3b8;
  --info: #60a5fa;

  /* Estados: fundo, contorno e texto saem do mesmo tom, por tema. */
  --alert-error-bg: rgba(239, 68, 68, 0.1);   --alert-error-line: rgba(239, 68, 68, 0.35);   --alert-error-fg: #fecaca;
  --alert-warn-bg: rgba(245, 158, 11, 0.1);   --alert-warn-line: rgba(245, 158, 11, 0.35);   --alert-warn-fg: #fde68a;
  --alert-ok-bg: rgba(34, 197, 94, 0.1);      --alert-ok-line: rgba(34, 197, 94, 0.35);      --alert-ok-fg: #bbf7d0;
  --alert-info-bg: rgba(59, 130, 246, 0.1);   --alert-info-line: rgba(59, 130, 246, 0.35);   --alert-info-fg: #bfdbfe;
  --pill-positive-bg: rgba(34, 197, 94, 0.14);  --pill-positive-fg: #4ade80;
  --pill-warning-bg: rgba(245, 158, 11, 0.14);  --pill-warning-fg: #fbbf24;
  --pill-negative-bg: rgba(239, 68, 68, 0.14);  --pill-negative-fg: #fca5a5;
  --pill-info-bg: rgba(96, 165, 250, 0.14);     --pill-info-fg: #93c5fd;

  --series-revenue: var(--brand);
  --series-spend: var(--warning);
  --series-cogs: #7c8db5;
  --series-profit: var(--positive);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-zero: rgba(255, 255, 255, 0.2);
  --chart-risk: rgba(248, 113, 113, 0.12);

  /* Atmosfera do fundo: dois halos de marca fixos ao ecrã. */
  --aurora-1: rgba(91, 155, 255, 0.11);
  --aurora-2: rgba(139, 123, 255, 0.075);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px -16px rgba(2, 6, 16, 0.8);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -18px rgba(2, 6, 16, 0.9);
  --shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border-strong);
  --ring: 0 0 0 3px rgba(91, 155, 255, 0.3);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sidebar-w: 244px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tema claro: mesma anatomia, luminosidade invertida. Escolhido em
 * `data-theme` (ver theme.ts); sem escolha, segue o sistema. */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f6fc;
  --bg-soft: #eaf0fa;
  --surface: #ffffff;
  --surface-2: #f4f7fd;
  --surface-3: #e5ecf8;
  --border: rgba(30, 50, 90, 0.12);
  --border-strong: rgba(30, 50, 90, 0.26);
  --control-border: #6f7f9c;
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 46%);
  --glass: rgba(255, 255, 255, 0.78);
  --scrim: rgba(15, 25, 50, 0.4);
  --hover-fill: rgba(30, 60, 120, 0.06);
  --icon-well: rgba(30, 60, 120, 0.07);

  --text: #0f1a33;
  --text-muted: #4a5b7a;
  --text-faint: #566888;

  --brand: #1f5bc7;
  --on-brand: #fff;
  --brand-strong: #1d55bd;
  --brand-soft: rgba(47, 111, 224, 0.11);
  --brand-line: rgba(47, 111, 224, 0.4);
  --brand-grad: linear-gradient(135deg, #2f6fe0 0%, #6a5cf0 100%);

  --positive: #137a38;
  --warning: #a04708;
  --negative: #c81e1e;
  --neutral: #55657a;
  --info: #2563eb;

  --alert-error-bg: rgba(220, 38, 38, 0.08);  --alert-error-line: rgba(220, 38, 38, 0.32);  --alert-error-fg: #991b1b;
  --alert-warn-bg: rgba(217, 119, 6, 0.09);   --alert-warn-line: rgba(217, 119, 6, 0.35);   --alert-warn-fg: #92400e;
  --alert-ok-bg: rgba(21, 128, 61, 0.08);     --alert-ok-line: rgba(21, 128, 61, 0.32);     --alert-ok-fg: #166534;
  --alert-info-bg: rgba(37, 99, 235, 0.08);   --alert-info-line: rgba(37, 99, 235, 0.3);    --alert-info-fg: #1e40af;
  --pill-positive-bg: rgba(21, 128, 61, 0.12);  --pill-positive-fg: #166534;
  --pill-warning-bg: rgba(217, 119, 6, 0.13);   --pill-warning-fg: #92400e;
  --pill-negative-bg: rgba(220, 38, 38, 0.11);  --pill-negative-fg: #b91c1c;
  --pill-info-bg: rgba(37, 99, 235, 0.11);      --pill-info-fg: #1d4ed8;

  --series-cogs: #6b7c9f;
  --chart-grid: rgba(30, 50, 90, 0.09);
  --chart-zero: rgba(30, 50, 90, 0.3);
  --chart-risk: rgba(200, 30, 30, 0.10);
  --aurora-1: rgba(47, 111, 224, 0.10);
  --aurora-2: rgba(106, 92, 240, 0.07);

  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(20, 35, 70, 0.06), 0 10px 24px -14px rgba(20, 35, 70, 0.22);
  --shadow-lift: inset 0 1px 0 #fff, 0 2px 4px rgba(20, 35, 70, 0.06), 0 20px 40px -18px rgba(20, 35, 70, 0.3);
  --shadow-pop: 0 24px 60px -14px rgba(20, 35, 70, 0.35), 0 0 0 1px var(--border-strong);
  --ring: 0 0 0 3px rgba(47, 111, 224, 0.3);
}