/* Clario — Azul Profundo + Azul Royal + Índigo + Violeta.
   Fonte única de cor. As duas cópias precisam permanecer iguais:
   - documentos_app/src/styles/clario-tokens.css
   - documentos_site/css/clario-tokens.css
   O site estático e o app Angular são repositórios separados.
   Gradiente só em destaque de marketing (--hero-gradient, --brand-accent-gradient). */

:root {
  /* 01 — Primitivos da marca. */
  --palette-navy: #0A1F44;
  --palette-navy-mid: #142C67;
  --palette-royal: #2563EB;
  --palette-indigo: #6366F1;
  --palette-indigo-deep: #4338CA;
  --palette-violet: #A78BFA;
  --palette-violet-deep: #5B21B6;

  /* 02 — Marca e ação. Azul royal no CTA; índigo em apoio; violeta só como acento. */
  --color-primary: var(--palette-royal);
  --color-primary-hover: #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-foreground: #FFFFFF;
  --color-primary-subtle: #EFF6FF;
  --color-secondary: var(--palette-indigo-deep);
  --color-secondary-hover: #3730A3;
  --color-accent: #7C3AED;
  --color-accent-text: var(--palette-violet-deep);
  --color-accent-bg: #EDE9FE;
  --color-focus-ring: var(--palette-royal);
  --color-selection-bg: #DBEAFE;

  /* 03 — Texto, superfície e controles. */
  --color-text-heading: var(--palette-navy);
  --color-text: #1E293B;
  --color-text-muted: #475569;
  --color-text-secondary: var(--color-text-muted);
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F1F5F9;
  --color-surface-muted: var(--color-surface-subtle);
  --color-border: #E2E8F0;
  --color-border-strong: #64748B;
  --color-disabled-border: #CBD5E1;
  --color-input-bg: #FFFFFF;
  --color-input-border: #CBD5E1;
  --color-input-border-hover: #64748B;
  --color-input-border-focus: #2563EB;
  --color-overlay: rgb(10 31 68 / 60%);

  /* 04 — Feedback semântico (não confundir com as cores da marca).
     As cores textuais são deliberadamente mais escuras do que os tons ilustrativos. */
  --color-success: #166534;
  --color-success-icon: #16A34A;
  --color-success-bg: #DCFCE7;
  --color-success-border: #86EFAC;

  --color-warning: #92400E;
  --color-warning-icon: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FCD34D;

  --color-danger: #B91C1C;
  --color-danger-icon: #EF4444;
  --color-danger-bg: #FEE2E2;
  --color-danger-border: #FCA5A5;

  --color-info: #1D4ED8;
  --color-info-bg: #DBEAFE;
  --color-info-border: #93C5FD;

  --color-neutral-status: #475569;
  --color-neutral-status-bg: #F1F5F9;
  --color-neutral-status-border: #CBD5E1;

  /* 05 — Estados do domínio: mostrar também ÍCONE e TEXTO, nunca só cor. */
  --status-pending-text: var(--color-warning);
  --status-pending-bg: var(--color-warning-bg);
  --status-pending-border: var(--color-warning-border);
  --status-received-text: var(--color-info);
  --status-received-bg: var(--color-info-bg);
  --status-received-border: var(--color-info-border);
  --status-review-text: var(--color-accent-text);
  --status-review-bg: var(--color-accent-bg);
  --status-review-border: #C4B5FD;
  --status-approved-text: var(--color-success);
  --status-approved-bg: var(--color-success-bg);
  --status-approved-border: var(--color-success-border);
  --status-rejected-text: var(--color-danger);
  --status-rejected-bg: var(--color-danger-bg);
  --status-rejected-border: var(--color-danger-border);
  --status-expired-text: var(--color-neutral-status);
  --status-expired-bg: var(--color-neutral-status-bg);
  --status-expired-border: var(--color-neutral-status-border);

  /* 06 — Navegação, sidebar, gráficos e profundidade */
  --sidebar-bg: var(--palette-navy);
  --sidebar-text: #FFFFFF;
  --sidebar-text-muted: #CBD5E1;
  --sidebar-border: rgb(255 255 255 / 14%);
  --sidebar-item-hover: rgb(255 255 255 / 10%);
  --sidebar-item-active: #253A78;
  --sidebar-item-active-text: #FFFFFF;
  --sidebar-focus-ring: #A5B4FC;
  --sidebar-active-indicator: var(--sidebar-focus-ring);
  --chart-1: #2563EB;
  --chart-2: #6366F1;
  --chart-3: #A78BFA;
  --chart-4: #64748B;
  --chart-5: #0A1F44;
  --shadow-card: 0 4px 18px rgb(10 31 68 / 5%);
  --shadow-popover: 0 12px 40px rgb(10 31 68 / 12%);
  --shadow-hero: 0 22px 60px rgb(10 31 68 / 13%);
  --shadow-panel: var(--shadow-popover);
  --shadow-menu: var(--shadow-hero);
  --radius-control: 10px;
  --radius-card: 14px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* 07 — Hero e elementos DECORATIVOS. Evitar gradiente no dashboard. */
  --hero-gradient: linear-gradient(125deg, #0A1F44 0%, #142C67 58%, #4338CA 100%);
  --brand-accent-gradient: linear-gradient(115deg, #2563EB, #6366F1);

  /* 08 — Tipografia e medidas já usadas pelos componentes. */
  --font-family-ui: var(--font-ui);
  --font-family-display: var(--font-ui);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height-body: 1.55;
  --line-height-heading: 1.16;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.5rem;
  --radius-panel: 1.25rem;
  --radius-pill: 999px;
  --focus-outline: 3px solid var(--color-focus-ring);
  --focus-offset: 3px;
  --height-control: 2.75rem;
  --content-max-width: 1200px;
  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

/* Landing pública: mais liberdade visual, sem sacrificar legibilidade. */
html[data-ui-context="marketing"],
html[data-clario-context="marketing"] {
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text-heading: #0A1F44;
  --shadow-card: 0 14px 40px rgb(10 31 68 / 6%);
}

/* Dashboard Angular: interface limpa, menos saturação em área extensa. */
html[data-ui-context="app"],
html[data-clario-context="app"] {
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F1F5F9;
  --color-surface-muted: var(--color-surface-subtle);
  --shadow-card: 0 3px 12px rgb(10 31 68 / 4%);
}

/* Portal do cliente: confiança e clareza para upload. */
html[data-ui-context="portal"],
html[data-clario-context="portal"] {
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text-heading: #0A1F44;
}

/* Migração TEMPORÁRIA: nomes encontrados nos HTMLs legados.
   Remover quando o código já consumir --color-* e --sidebar-*.
   Se as telas antigas declararem estas variáveis depois deste arquivo,
   as definições antigas prevalecem — importar tokens DEPOIS ou removê-las. */
:root {
  --navy: var(--palette-navy);
  --teal: var(--color-primary);   /* compatibilidade, não significa verde */
  --teal2: var(--color-primary-hover);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --bg: var(--color-background);
  --line: var(--color-border);
  --soft: var(--color-surface-subtle);
  --white: var(--color-surface);
  --warn: var(--color-warning);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --shadow: var(--shadow-card);
}

/* Estilos utilitários OPT-IN — não sobrescrevem os componentes existentes. */
.u-focus-ring:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-text-heading);
}

.wordmark {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.footer .wordmark {
  color: #f4f7ff;
}