@import url('/planet-hub/assets/planet-expansion-v2.css?v=20260806-1');
@import url('/planet-hub/assets/finance-visual-v1.css?v=20260806-1');

/* André OS · sistema visual oficial
   Fonte única de tokens e contratos compartilhados.
   Módulos devem consumir estas variáveis em vez de cores, raios e sombras fixos. */

:root {
  color-scheme: light;

  /* Cor */
  --os-page: #f4f4f8;
  --os-surface: #ffffff;
  --os-surface-subtle: #fafafe;
  --os-surface-raised: #ffffff;
  --os-surface-inverse: #17141f;
  --os-text: #1a1b24;
  --os-text-strong: #12131b;
  --os-text-muted: #747684;
  --os-text-faint: #9597a5;
  --os-border: #e4e4ec;
  --os-border-strong: #d6d5e1;
  --os-accent: #735cff;
  --os-accent-strong: #5b43ed;
  --os-accent-soft: #eeebff;
  --os-danger: #c54f47;
  --os-danger-soft: #fff0ee;
  --os-warning: #a86914;
  --os-warning-soft: #fff5dd;
  --os-success: #187d59;
  --os-success-soft: #e8f7f1;
  --os-info: #3977e8;
  --os-info-soft: #eaf1ff;

  /* Forma */
  --os-radius-xs: 8px;
  --os-radius-sm: 10px;
  --os-radius-md: 14px;
  --os-radius-lg: 18px;
  --os-radius-xl: 22px;
  --os-radius-2xl: 26px;
  --os-radius-pill: 999px;

  /* Espaço */
  --os-space-1: 4px;
  --os-space-2: 8px;
  --os-space-3: 12px;
  --os-space-4: 16px;
  --os-space-5: 20px;
  --os-space-6: 24px;
  --os-space-7: 32px;
  --os-space-8: 40px;

  /* Elevação */
  --os-shadow-sm: 0 8px 24px rgba(25, 22, 43, .05);
  --os-shadow-md: 0 14px 38px rgba(25, 22, 43, .08);
  --os-shadow-lg: 0 24px 64px rgba(18, 16, 34, .16);

  /* Compatibilidade durante a migração */
  --aos-page: var(--os-page);
  --aos-surface: var(--os-surface);
  --aos-surface-soft: var(--os-surface-subtle);
  --aos-line: var(--os-border);
  --aos-line-strong: var(--os-border-strong);
  --aos-text: var(--os-text);
  --aos-ink: var(--os-text-strong);
  --aos-ink-soft: var(--os-text);
  --aos-muted: var(--os-text-muted);
  --aos-muted-2: var(--os-text-faint);
  --aos-accent: var(--os-accent);
  --aos-accent-strong: var(--os-accent-strong);
  --aos-accent-soft: var(--os-accent-soft);
  --aos-coral: var(--os-danger);
  --aos-coral-soft: var(--os-danger-soft);
  --aos-green: var(--os-success);
  --aos-green-soft: var(--os-success-soft);
  --aos-amber: var(--os-warning);
  --aos-amber-soft: var(--os-warning-soft);
  --aos-blue: var(--os-info);
  --aos-blue-soft: var(--os-info-soft);
  --aos-shadow: var(--os-shadow-md);
  --aos-shadow-strong: var(--os-shadow-lg);
}

/* Tema escuro atual permanece exclusivo do mobile até a migração do desktop terminar. */
@media (max-width: 820px) and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --os-page: #0d0c11;
    --os-surface: #17151c;
    --os-surface-subtle: #201c27;
    --os-surface-raised: #282131;
    --os-surface-inverse: #f4f1f8;
    --os-text: #f4f1f8;
    --os-text-strong: #ffffff;
    --os-text-muted: #aaa4b2;
    --os-text-faint: #7f7988;
    --os-border: #393340;
    --os-border-strong: #4a4254;
    --os-accent: #917bff;
    --os-accent-strong: #7a62f4;
    --os-accent-soft: #2b2544;
    --os-danger: #ff9c93;
    --os-danger-soft: #3b2427;
    --os-warning: #f0b65c;
    --os-warning-soft: #3b3020;
    --os-success: #55d3a2;
    --os-success-soft: #19372f;
    --os-info: #76a5ff;
    --os-info-soft: #202d49;
    --os-shadow-sm: 0 8px 24px rgba(0, 0, 0, .20);
    --os-shadow-md: 0 16px 42px rgba(0, 0, 0, .28);
    --os-shadow-lg: 0 28px 72px rgba(0, 0, 0, .46);
  }
}

/* Contratos compartilhados. Classes existentes podem aderir gradualmente. */
.os-surface {
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-lg);
  color: var(--os-text);
  background: var(--os-surface);
  box-shadow: var(--os-shadow-sm);
}

.os-surface-raised {
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-xl);
  color: var(--os-text);
  background: var(--os-surface-raised);
  box-shadow: var(--os-shadow-md);
}

.os-button {
  min-height: 42px;
  padding-inline: var(--os-space-4);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md);
  color: var(--os-text);
  background: var(--os-surface);
  font-weight: 800;
}

.os-button-primary {
  border-color: var(--os-accent);
  color: #fff;
  background: var(--os-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--os-accent) 28%, transparent);
}

.os-field {
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md);
  color: var(--os-text);
  background: var(--os-surface-subtle);
}

.os-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: var(--os-space-3);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-pill);
  color: var(--os-text-muted);
  background: var(--os-surface-subtle);
  font-size: 12px;
  font-weight: 800;
}

.os-alert {
  padding: var(--os-space-4);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md);
  color: var(--os-text);
  background: var(--os-surface);
}

.os-alert-danger {
  border-color: color-mix(in srgb, var(--os-danger) 45%, var(--os-border));
  color: var(--os-danger);
  background: var(--os-danger-soft);
}