/* SAGAZ global design system. Theme selects color; media queries select layout. */
:root {
  color-scheme: light;

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-xs: 2px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius: var(--radius-xs);

  --color-bg: #f5f5f0;
  --color-bg-subtle: #eceee9;
  --color-surface-1: #ffffff;
  --color-surface-2: #f8faf8;
  --color-surface-3: #eef1ee;
  --color-surface-elevated: #ffffff;
  --color-surface-hover: #f1f3f0;
  --color-surface-active: #e8ebe7;

  --color-border: rgba(17, 24, 39, .12);
  --color-border-strong: rgba(17, 24, 39, .22);
  --color-divider: rgba(17, 24, 39, .09);

  --color-text: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #64748b;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;

  /* #dc2626 is the established SAGAZ mobile navigation/chat accent. */
  --color-accent: #dc2626;
  --color-accent-hover: #b91c1c;
  --color-accent-active: #991b1b;
  --color-accent-soft: rgba(220, 38, 38, .11);
  --color-accent-border: rgba(220, 38, 38, .34);
  --color-on-accent: #ffffff;
  --color-focus-ring: #dc2626;

  --color-success: #15803d;
  --color-success-soft: #ecfdf3;
  --color-success-border: #a7f3d0;
  --color-on-success: #ffffff;
  --color-warning: #b45309;
  --color-warning-soft: #fffbeb;
  --color-warning-border: #fde68a;
  --color-danger: #b4232d;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;
  --color-on-danger: #ffffff;
  --color-info: #1d4ed8;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-whatsapp: #25d366;

  --control-bg: var(--color-surface-1);
  --control-hover: var(--color-surface-hover);
  --control-active: var(--color-surface-active);
  --control-border: var(--color-border-strong);
  --control-placeholder: var(--color-text-muted);

  --overlay-bg: var(--color-surface-elevated);
  --backdrop-bg: rgba(15, 18, 17, .55);

  --chat-bg: var(--color-bg-subtle);
  --chat-incoming-bg: var(--color-surface-1);
  --chat-incoming-text: var(--color-text);
  --chat-outgoing-bg: var(--color-accent-active);
  --chat-outgoing-text: var(--color-on-accent);
  --chat-meta-text: var(--color-text-muted);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 70px rgba(15, 23, 42, .16);

  /* Compatibility aliases. New UI must consume the semantic tokens above. */
  --color-black: var(--color-text);
  --color-white: var(--color-surface-1);
  --color-cream: var(--color-bg);
  --color-red: var(--color-accent-hover);
  --color-red-light: var(--color-accent);
  --color-gray: var(--color-text-muted);
  --color-gray-light: var(--color-border);
  --color-gray-dark: var(--color-text-secondary);
  --border: var(--color-border);
  --shadow: var(--shadow-md);
  --muted: var(--color-text-muted);
  --brand-primary: var(--color-accent);
  --brand-secondary: var(--color-accent-hover);
  --card-bg: var(--color-surface-1);
  --sagaz-bg: var(--color-bg);
  --sagaz-surface: var(--color-surface-1);
  --sagaz-surface-2: var(--color-surface-2);
  --sagaz-border: var(--color-border);
  --sagaz-text: var(--color-text);
  --sagaz-muted: var(--color-text-muted);
  --sagaz-accent: var(--color-accent);
  --sagaz-mobile-accent: var(--color-accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #050706;
  --color-bg-subtle: #0b0f0d;
  --color-surface-1: #111513;
  --color-surface-2: #171d1a;
  --color-surface-3: #202622;
  --color-surface-elevated: #252c28;
  --color-surface-hover: #29312d;
  --color-surface-active: #323b36;

  --color-border: rgba(242, 247, 244, .10);
  --color-border-strong: rgba(242, 247, 244, .18);
  --color-divider: rgba(242, 247, 244, .08);

  --color-text: #f2f7f4;
  --color-text-secondary: #c8d1cc;
  --color-text-muted: #9aa8a1;
  --color-text-disabled: #68736d;
  --color-text-inverse: #111513;

  --color-accent: #dc2626;
  --color-accent-hover: #b91c1c;
  --color-accent-active: #b91c1c;
  --color-accent-soft: rgba(220, 38, 38, .17);
  --color-accent-border: rgba(239, 68, 68, .42);
  --color-on-accent: #ffffff;
  --color-focus-ring: #ef4444;

  --color-success: #4ade80;
  --color-success-soft: rgba(34, 197, 94, .15);
  --color-success-border: rgba(74, 222, 128, .38);
  --color-on-success: #111513;
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(245, 158, 11, .16);
  --color-warning-border: rgba(251, 191, 36, .38);
  --color-danger: #fb7185;
  --color-danger-soft: rgba(244, 63, 94, .16);
  --color-danger-border: rgba(251, 113, 133, .40);
  --color-on-danger: #111513;
  --color-info: #60a5fa;
  --color-info-soft: rgba(59, 130, 246, .16);
  --color-info-border: rgba(96, 165, 250, .38);

  --control-bg: var(--color-surface-2);
  --control-hover: var(--color-surface-hover);
  --control-active: var(--color-surface-active);
  --control-border: var(--color-border-strong);
  --control-placeholder: #819088;

  --overlay-bg: var(--color-surface-elevated);
  --backdrop-bg: rgba(0, 0, 0, .68);

  --chat-bg: var(--color-bg-subtle);
  --chat-incoming-bg: var(--color-surface-3);
  --chat-incoming-text: var(--color-text);
  --chat-outgoing-bg: #641923;
  --chat-outgoing-text: #fff7f8;
  --chat-meta-text: var(--color-text-muted);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .30);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
}

html,
body {
  background: var(--color-bg);
  color: var(--color-text);
}

body,
button,
input,
select,
textarea {
  accent-color: var(--color-accent);
}

:where(a) {
  text-decoration-color: var(--color-accent-border);
}

:where(a:hover) {
  text-decoration-color: var(--color-accent);
}

:where(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

:where(input, select, textarea) {
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--color-text);
}

:where(input, textarea)::placeholder {
  color: var(--control-placeholder);
  opacity: 1;
}

:where(input, select, textarea):disabled {
  border-color: var(--color-border);
  background: var(--color-surface-3);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

:where(dialog, [role="dialog"], [role="alertdialog"]) {
  border-color: var(--color-border);
  background: var(--overlay-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

:where(dialog)::backdrop {
  background: var(--backdrop-bg);
}

:where(table) {
  color: var(--color-text);
}

:where(thead, th) {
  color: var(--color-text-secondary);
}

:where(th, td) {
  border-color: var(--color-divider);
}

:where(tbody tr:hover) {
  background: var(--color-surface-hover);
}

/* Shared primitives for new and migrated screens. */
.sagaz-card,
.sagaz-panel,
.sagaz-table-surface,
.sagaz-filter-panel,
.sagaz-modal,
.sagaz-drawer {
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.sagaz-surface-elevated {
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.sagaz-button,
.sagaz-button--primary,
.sagaz-button--secondary,
.sagaz-button--ghost,
.sagaz-button--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: .55rem .85rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sagaz-button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.sagaz-button--primary:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

.sagaz-button--primary:active {
  border-color: var(--color-accent-active);
  background: var(--color-accent-active);
}

.sagaz-button--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.sagaz-button--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.sagaz-button--secondary:hover,
.sagaz-button--ghost:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.sagaz-button--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-on-danger);
}

.sagaz-button:disabled,
.sagaz-button--primary:disabled,
.sagaz-button--secondary:disabled,
.sagaz-button--ghost:disabled,
.sagaz-button--danger:disabled {
  border-color: var(--color-border);
  background: var(--color-surface-3);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.sagaz-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.sagaz-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.sagaz-badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.sagaz-badge--info { background: var(--color-info-soft); color: var(--color-info); }

/* Compatibility layer for recurring legacy component names. */
html[data-theme] :is(
  .card,
  .panel,
  .metric-card,
  .filter-panel,
  .table-surface,
  .detail-card,
  .summary-card,
  .inv-kpi,
  .inv-panel,
  .adm-card,
  .ten-card,
  .imp-card,
  .sub-card
) {
  border-color: var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

html[data-theme] :is(
  .btn-primary,
  .button-primary,
  .primary-button,
  .inv-btn,
  .adm-btn--primary,
  .pipeline-btn--dark
) {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

html[data-theme] :is(
  .btn-primary,
  .button-primary,
  .primary-button,
  .inv-btn,
  .adm-btn--primary,
  .pipeline-btn--dark
):hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light !important;
    --color-bg: #ffffff !important;
    --color-bg-subtle: #ffffff !important;
    --color-surface-1: #ffffff !important;
    --color-surface-2: #ffffff !important;
    --color-surface-3: #ffffff !important;
    --color-surface-elevated: #ffffff !important;
    --color-surface-hover: #ffffff !important;
    --color-surface-active: #ffffff !important;
    --color-text: #000000 !important;
    --color-text-secondary: #222222 !important;
    --color-text-muted: #444444 !important;
    --color-text-disabled: #666666 !important;
    --color-text-inverse: #ffffff !important;
    --color-border: #b8b8b8 !important;
    --color-border-strong: #888888 !important;
    --color-divider: #c8c8c8 !important;
    --control-bg: #ffffff !important;
    --control-hover: #ffffff !important;
    --control-active: #ffffff !important;
    --control-border: #888888 !important;
    --overlay-bg: #ffffff !important;
    --chat-bg: #ffffff !important;
    --chat-incoming-bg: #ffffff !important;
    --chat-incoming-text: #000000 !important;
    --chat-outgoing-bg: #eeeeee !important;
    --chat-outgoing-text: #000000 !important;
    --chat-meta-text: #444444 !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
  }

  .sidebar,
  .topbar,
  .mobile-bottom-nav,
  dialog,
  [role="dialog"],
  button,
  .no-print {
    display: none !important;
  }

  body,
  .main-area,
  .content {
    min-height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
}