/**
 * P&J Corporate Design System — Dual-Theme Tokens (Dark & Light)
 * Baseado no Material Design 3 (M3) e adaptado para B2B Enterprise Flat.
 * Compatibilidade estrita WCAG 2.1 AA e arquitetura de tokens canônicos.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..900;1,9..40,400..900&family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..900&family=Outfit:wght@400..900&family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  /* ==========================================================================
     GEOMETRIA & TIPOGRAFIA BASE (COMPARTILHADA)
     ========================================================================== */
  --pj-radius-card: 15px;
  --pj-radius-inset: 10px;
  --pj-radius-btn: 24px;
  --pj-radius-pill: 40px;

  --pj-h1-size: 22px;
  --pj-h1-weight: 700;

  --pj-h2-size: 16px;
  --pj-h2-weight: 600;

  --pj-h3-size: 12px;
  --pj-h3-weight: 500;

  --pj-h4-size: 10px;
  --pj-h4-weight: 500;

  --pj-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pj-font-numbers: 'DM Sans', sans-serif;
  --pj-num-weight: 600;
  --pj-font-weight-num: var(--pj-num-weight);
  --pj-body-weight: 400;

  --pj-trace-pos: none;
  --pj-trace-width: 1px;
}

/* ==========================================================================
   TEMA ESCURO (DARK THEME) — CANÔNICO MATERIAL 3 FLAT
   ========================================================================== */
:root,
:root[data-theme='dark'],
:root.dark,
[data-theme='dark'],
.dark {
  /* Superfícies Material 3 (Tonal Elevation Flat) */
  --pj-surface-page: #19232e;
  --pj-surface-card: #090e15;
  --pj-surface-elevated: #141c27;
  --pj-surface-inner: #19222e;
  --pj-surface-hover: #1f2b3a;
  --pj-surface-header: #0e1620;
  --pj-surface-pill: #1f2c3a;
  --pj-surface-overlay: rgba(9, 14, 21, 0.92);

  /* Aliases Unidirecionais de Superfícies (Sem dependência circular) */
  --bg-canvas: var(--pj-surface-page);
  --bg-card: var(--pj-surface-card);
  --bg-card-alt: var(--pj-surface-elevated);
  --bg-card-hover: var(--pj-surface-hover);
  --bg-header: var(--pj-surface-header);
  --pj-bg-canvas: var(--pj-surface-page);
  --pj-bg-card: var(--pj-surface-card);
  --pj-bg-inset: var(--pj-surface-inner);
  --pj-bg-header: var(--pj-surface-header);
  --pj-bg-pill: var(--pj-surface-pill);

  /* Identidade Corporativa & Acentos */
  --pj-brand-navy: #090e15;
  --pj-brand-wine: #ab2f4c;
  --pj-primary-deep: #090e15;
  --pj-primary: #141c27;
  --pj-primary-light: #19222e;
  --pj-acc: #ab2f4c;
  --pj-acc-light: #c73654;
  --pj-acc-muted: rgba(171, 47, 76, 0.16);
  --pj-accent: #ab2f4c;
  --pj-accent-light: #c73654;
  --pj-brand-primary: var(--pj-acc);

  /* Tipografia & Textos de Alto Contraste */
  --pj-text-primary: #f8fafc;
  --pj-text-secondary: #94a3b8;
  --pj-text-muted: #64748b;
  --pj-text-inverse: #090e15;
  --pj-text-title: var(--pj-text-primary);
  --pj-text-body: var(--pj-text-secondary);

  /* Ausência Total de Sombras e Bordas (Material 3 Borderless) */
  --pj-border-default: transparent;
  --pj-border-strong: transparent;
  --pj-border-focus: transparent;
  --border-subtle: transparent;
  --border-medium: transparent;
  --pj-shadow-card: none;
  --pj-shadow-sm: none;
  --pj-shadow-md: none;
  --pj-shadow-lg: none;

  /* Ações */
  --pj-action-primary: #ab2f4c;
  --pj-action-primary-hover: #8f233c;
  --pj-action-secondary: #19222e;
  --pj-action-secondary-hover: #1f2b3a;

  /* Status Semânticos & Feedbacks (WCAG 2.1 AA) */
  --pj-ok: #00e699;
  --pj-ok-soft: rgba(0, 230, 153, 0.14);
  --pj-warn: #fbbf24;
  --pj-warn-soft: rgba(251, 191, 36, 0.14);
  --pj-bad: #ef4444;
  --pj-bad-soft: rgba(239, 68, 68, 0.14);
  --pj-info: #38bdf8;
  --pj-info-soft: rgba(56, 189, 248, 0.14);
  --pj-purple: #c084fc;
  --pj-purple-soft: rgba(192, 132, 252, 0.14);

  --pj-feedback-success: var(--pj-ok);
  --pj-feedback-warning: var(--pj-warn);
  --pj-feedback-danger: var(--pj-bad);
  --pj-feedback-info: var(--pj-info);
  --pj-success: var(--pj-ok);
  --pj-warning: var(--pj-warn);
  --pj-danger: var(--pj-bad);
  --pj-error: var(--pj-bad);

  /* Controles & Trilhas */
  --pj-ring-track: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

/* ==========================================================================
   TEMA CLARO (LIGHT THEME) — CANÔNICO MATERIAL 3 FLAT (WCAG AA ESTRITO)
   ========================================================================== */
:root[data-theme='light'],
:root.light,
[data-theme='light'],
.light {
  --pj-h3-weight: 600;  /* Light: 600 para melhor legibilidade */
  --pj-num-weight: 700; /* Light: 700 para números firmes */

  /* Superfícies Material 3 (Tonal Elevation Flat) */
  --pj-surface-page: #f1f5f9;
  --pj-surface-card: #ffffff;
  --pj-surface-elevated: #f8fafc;
  --pj-surface-inner: #f1f5f9;
  --pj-surface-hover: #f1f5f9;
  --pj-surface-header: #ffffff;
  --pj-surface-pill: #e2e8f0;
  --pj-surface-overlay: rgba(15, 23, 42, 0.60);

  /* Aliases Unidirecionais de Superfícies (Sem dependência circular) */
  --bg-canvas: var(--pj-surface-page);
  --bg-card: var(--pj-surface-card);
  --bg-card-alt: var(--pj-surface-elevated);
  --bg-card-hover: var(--pj-surface-hover);
  --bg-header: var(--pj-surface-header);
  --pj-bg-canvas: var(--pj-surface-page);
  --pj-bg-card: var(--pj-surface-card);
  --pj-bg-inset: var(--pj-surface-inner);
  --pj-bg-header: var(--pj-surface-header);
  --pj-bg-pill: var(--pj-surface-pill);

  /* Identidade Corporativa & Acentos */
  --pj-brand-navy: #062949;
  --pj-brand-wine: #ab2f4c;
  --pj-primary-deep: #081f33;
  --pj-primary: #0b2f4a;
  --pj-primary-light: #1e3a8a;
  --pj-acc: #ab2f4c;
  --pj-acc-light: #8e203a;
  --pj-acc-muted: rgba(171, 47, 76, 0.10);
  --pj-accent: #b02a45;
  --pj-accent-light: #c73654;
  --pj-brand-primary: var(--pj-acc);

  /* Tipografia & Textos de Alto Contraste (WCAG 2.1 AA/AAA) */
  --pj-text-primary: #0f172a;
  --pj-text-secondary: #334155;
  --pj-text-muted: #475569;
  --pj-text-inverse: #ffffff;
  --pj-text-title: var(--pj-text-primary);
  --pj-text-body: var(--pj-text-secondary);

  /* Bordas Nítidas & Ausência Total de Sombras Pesadas */
  --pj-border-default: #e2e8f0;
  --pj-border-strong: #cbd5e1;
  --pj-border-focus: #0369a1;
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --pj-shadow-card: none;
  --pj-shadow-sm: none;
  --pj-shadow-md: none;
  --pj-shadow-lg: none;

  /* Ações */
  --pj-action-primary: #b02a45;
  --pj-action-primary-hover: #8e2036;
  --pj-action-secondary: #f1f5f9;
  --pj-action-secondary-hover: #e2e8f0;

  /* Status Semânticos & Feedbacks (WCAG 2.1 AA Estrito >= 4.5:1) */
  --pj-ok: #047857;
  --pj-ok-soft: rgba(4, 120, 87, 0.12);
  --pj-warn: #b45309;
  --pj-warn-soft: rgba(180, 83, 9, 0.12);
  --pj-bad: #b91c1c;
  --pj-bad-soft: rgba(185, 28, 28, 0.12);
  --pj-info: #0369a1;
  --pj-info-soft: rgba(3, 105, 161, 0.12);
  --pj-purple: #7c3aed;
  --pj-purple-soft: rgba(124, 58, 237, 0.12);

  --pj-feedback-success: var(--pj-ok);
  --pj-feedback-warning: var(--pj-warn);
  --pj-feedback-danger: var(--pj-bad);
  --pj-feedback-info: var(--pj-info);
  --pj-success: var(--pj-ok);
  --pj-warning: var(--pj-warn);
  --pj-danger: var(--pj-bad);
  --pj-error: var(--pj-bad);

  /* Controles & Trilhas */
  --pj-ring-track: rgba(0, 0, 0, 0.07);
  color-scheme: light;
}