/*
 * Sólides Visual Tokens — alinhado com docs/DESIGN.md
 *
 * Mantém prefixo `--sds-*` (legacy) para nao quebrar arquivos existentes
 * + adiciona tokens novos `--ss-*` (novo design system) usados pelos
 * componentes `.ss-*`. Aliases preservam compatibilidade.
 *
 * Princípios DESIGN.md:
 * - Roxo Sólides #80297D é a constante. Tudo orbita em volta.
 * - Cantos arredondados (brasilidade nas curvas).
 * - Shadow-roxo é assinatura visual em CTAs primarios.
 * - Sem gradiente em cards inteiros, sem cantos vivos, sem emoji em produto.
 */

/* ── Fontes (Poppins primaria + Red Hat Display secundaria) ─────────────── */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&family=Red+Hat+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap");

:root {
  /* ── Cores: Hierarquia oficial ───────────────────────────────────────── */
  /* 1. Roxo Sólides — primária dominante (CTAs, headers, ícones, ativos) */
  --ss-roxo-900: #1f0a26;
  --ss-roxo-800: #3d194f; /* Roxo Solução — profundidade, gradientes sutis */
  --ss-roxo-700: #5e1f6a;
  --ss-roxo-600: #80297d; /* ★ ROXO SÓLIDES — primária */
  --ss-roxo-500: #9b3a98;
  --ss-roxo-400: #b566b1;
  --ss-roxo-300: #d094cc;
  --ss-roxo-200: #e6c0e3;
  --ss-roxo-100: #f0d9ee;
  --ss-roxo-50: #f8edf7; /* tinge background hover de itens ghost (~6%) */

  /* Acentos vibrantes — uso em ilustracao/tags, NAO em UI funcional */
  --ss-roxo-lideranca: #d51bed; /* Roxo Liderança */
  --ss-roxo-dev: #db60ec; /* Roxo Dev */

  /* Profiler — IDENTIDADE COMPORTAMENTAL, nunca usar como estado de UI */
  --ss-profiler-executor: #cc2138; /* Vermelho Executor */
  --ss-profiler-comunicador: #ffba00; /* Amarelo Comunicador */
  --ss-profiler-planejador: #00a861; /* Verde Planejador */
  --ss-profiler-analista: #2657ed; /* Azul Analista */

  /* 2. Branco — superficie padrao */
  --ss-surface: #ffffff;
  --ss-surface-subtle: #fafafb;
  --ss-surface-muted: #f5f5f7;

  /* Neutros (escala de cinza) */
  --ss-neutral-50: #fafafb;
  --ss-neutral-100: #f0f0f2;
  --ss-neutral-200: #e3e3e7;
  --ss-neutral-300: #c8c8d0;
  --ss-neutral-400: #9e9eaa;
  --ss-neutral-500: #757582;
  --ss-neutral-600: #525260;
  --ss-neutral-700: #3a3a44;
  --ss-neutral-800: #232328;
  --ss-neutral-900: #131316;

  /* Texto */
  --ss-text-strong: var(--ss-neutral-900);
  --ss-text: var(--ss-neutral-700);
  --ss-text-muted: var(--ss-neutral-500);
  --ss-text-inverse: #ffffff;

  /* Bordas */
  --ss-border: var(--ss-neutral-200);
  --ss-border-strong: var(--ss-neutral-300);

  /* ── Tokens semanticos (NUNCA confundir com cores Profiler) ─────────── */
  --ss-success-50: #e6f7ee;
  --ss-success-600: #00a861;
  --ss-success-700: #007a47;
  --ss-warning-50: #fff8e6;
  --ss-warning-600: #f59e0b;
  --ss-warning-700: #b86d00;
  --ss-danger-50: #fde6ea;
  --ss-danger-600: #cc2138;
  --ss-danger-700: #991527;
  --ss-info-50: #e6edfd;
  --ss-info-600: #2657ed;
  --ss-info-700: #1a3fb0;

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --ss-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ss-font-body: "Red Hat Display", "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Escala (DESIGN.md §4) */
  --ss-font-size-display: 64px;
  --ss-font-size-h1: 48px;
  --ss-font-size-h2: 36px;
  --ss-font-size-h3: 28px;
  --ss-font-size-h4: 22px;
  --ss-font-size-lead: 20px;
  --ss-font-size-body: 16px;
  --ss-font-size-sm: 14px;
  --ss-font-size-xs: 12px;
  --ss-font-size-eyebrow: 13px;

  --ss-line-height-display: 1.08;
  --ss-line-height-heading: 1.15;
  --ss-line-height-body: 1.55;

  /* ── Spacing — base 4px (DESIGN.md §5) ──────────────────────────────── */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 24px;
  --ss-space-6: 32px;
  --ss-space-7: 48px;
  --ss-space-8: 64px;
  --ss-space-9: 96px;

  /* ── Radii — curvas brasileiras ─────────────────────────────────────── */
  --ss-radius-xs: 6px;
  --ss-radius-sm: 10px;
  --ss-radius-md: 12px; /* Inputs, buttons */
  --ss-radius-lg: 16px; /* Cards */
  --ss-radius-xl: 20px; /* Painéis */
  --ss-radius-2xl: 28px;
  --ss-radius-pill: 999px; /* CTAs grandes, avatares, badges */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --ss-shadow-1: 0 1px 2px rgba(19, 19, 22, 0.04), 0 4px 12px rgba(19, 19, 22, 0.06);
  --ss-shadow-2: 0 4px 8px rgba(19, 19, 22, 0.06), 0 12px 28px rgba(19, 19, 22, 0.1);
  --ss-shadow-roxo: 0 6px 16px rgba(128, 41, 125, 0.28); /* Assinatura visual */
  --ss-shadow-inner-roxo: inset 0 0 0 1px rgba(128, 41, 125, 0.16);
  --ss-shadow-focus-roxo: 0 0 0 3px rgba(128, 41, 125, 0.18);

  /* ── Movimento (DESIGN.md §7) ───────────────────────────────────────── */
  --ss-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ss-duration-micro: 150ms;
  --ss-duration-enter: 240ms;
  --ss-duration-screen: 320ms;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --ss-container-app: 1280px;
  --ss-container-marketing: 1200px;
  --ss-sidebar-width: 248px;
  --ss-topbar-height: 64px;

  /* ─── Aliases legacy (--sds-*) — preservam codigo antigo ─────────────── */
  --sds-font-family-base: var(--ss-font-display);
  --sds-color-brand-primary: var(--ss-roxo-600);
  --sds-color-brand-primary-strong: var(--ss-roxo-800);
  --sds-color-brand-secondary: var(--ss-roxo-lideranca);
  --sds-color-brand-secondary-soft: var(--ss-roxo-100);
  --sds-color-accent: var(--ss-profiler-comunicador);
  --sds-color-info: var(--ss-info-600);
  --sds-color-success: var(--ss-success-600);
  --sds-color-success-bright: #00d478;
  --sds-color-danger: var(--ss-danger-600);
  --sds-color-bg: var(--ss-surface);
  --sds-color-bg-subtle: var(--ss-roxo-50);
  --sds-color-text: var(--ss-text);
  --sds-color-text-strong: var(--ss-text-strong);
  --sds-color-text-inverse: var(--ss-text-inverse);
  --sds-color-border: var(--ss-border);

  --sds-container-max-width: var(--ss-container-marketing);

  --sds-space-xxs: var(--ss-space-1);
  --sds-space-xs: var(--ss-space-2);
  --sds-space-sm: var(--ss-space-3);
  --sds-space-md: var(--ss-space-4);
  --sds-space-lg: var(--ss-space-4);
  --sds-space-xl: var(--ss-space-5);
  --sds-space-2xl: var(--ss-space-6);
  --sds-space-3xl: var(--ss-space-7);
  --sds-space-4xl: var(--ss-space-8);

  --sds-radius-sm: var(--ss-radius-sm);
  --sds-radius-md: var(--ss-radius-lg);
  --sds-radius-pill: var(--ss-radius-pill);

  --sds-shadow-card: var(--ss-shadow-1);
  --sds-shadow-focus: var(--ss-shadow-focus-roxo);
  --sds-transition-fast: var(--ss-duration-micro) var(--ss-easing);

  /* ─── Aliases para o sistema legacy `.ss-primary-*` (design-system.css) ── */
  /* Mapeia escala antiga para nova paleta roxo. Permite que componentes      */
  /* existentes peguem o novo design sem reescrita.                            */
  --ss-primary-50: var(--ss-roxo-50);
  --ss-primary-100: var(--ss-roxo-100);
  --ss-primary-200: var(--ss-roxo-200);
  --ss-primary-300: var(--ss-roxo-300);
  --ss-primary-400: var(--ss-roxo-400);
  --ss-primary-500: var(--ss-roxo-500);
  --ss-primary-600: var(--ss-roxo-600);
  --ss-primary-700: var(--ss-roxo-700);
  --ss-primary-800: var(--ss-roxo-800);
  --ss-primary-900: var(--ss-roxo-900);

  --ss-neutral-0: var(--ss-surface);
  --ss-bg: var(--ss-surface-subtle);
  --ss-text-subtle: var(--ss-text-muted);

  /* Spacing legacy 0/7 que existiam */
  --ss-space-0: 0;
  /* design-system.css usa --ss-space-7 = 40px (legacy); mantem alias        */
  /* sem sobrescrever o novo valor 48px — quem precisar de 40 usa custom.   */

  /* Tokens semanticos legacy */
  --ss-success-600-legacy: #0f766e;
  --ss-warning-600-legacy: #b54708;
  --ss-danger-600-legacy: #b42318;

  --ss-focus-ring: var(--ss-shadow-focus-roxo);

  /* Shadows legacy */
  --ss-shadow-sm: 0 1px 2px rgba(19, 19, 22, 0.06);
  --ss-shadow-md: var(--ss-shadow-1);
  --ss-shadow-lg: var(--ss-shadow-2);
  --ss-transition-fast: var(--ss-duration-micro) var(--ss-easing);
  --ss-transition-base: var(--ss-duration-enter) var(--ss-easing);

  --ss-container-max: var(--ss-container-app);
  --ss-control-height: 40px;

  --ss-font-family: var(--ss-font-display);

  /* line-height legacy */
  --ss-line-height-tight: var(--ss-line-height-heading);
  --ss-line-height-base: var(--ss-line-height-body);

  /* font-size legacy */
  --ss-font-size-md: var(--ss-font-size-body);
  --ss-font-size-lg: var(--ss-font-size-lead);
  --ss-font-size-xl: var(--ss-font-size-h3);
}

/* ── Reset minimo + base global ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ss-surface);
  color: var(--ss-text);
  /* Body usa Red Hat Display — escolha consciente para corpo de texto longo
   * (DESIGN.md §4). Display/headings ficam em Poppins via headings rule. */
  font-family: var(--ss-font-body);
  font-size: var(--ss-font-size-body);
  line-height: var(--ss-line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: var(--ss-roxo-600);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ss-duration-micro) var(--ss-easing);
}

a:hover,
a:focus-visible {
  color: var(--ss-roxo-800);
  text-decoration: underline;
}

:focus-visible {
  box-shadow: var(--ss-shadow-focus-roxo);
  outline: none;
}

/* ── Tipografia base ─────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ss-text-strong);
  /* Headings em Poppins (display) */
  font-family: var(--ss-font-display);
  font-weight: 600;
  line-height: var(--ss-line-height-heading);
  margin: 0 0 var(--ss-space-4);
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2rem, 4.6vw, var(--ss-font-size-h1));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--ss-line-height-display);
}

h2 {
  font-size: clamp(1.625rem, 3.4vw, var(--ss-font-size-h2));
  letter-spacing: -0.012em;
}

h3 {
  font-size: clamp(1.25rem, 2.4vw, var(--ss-font-size-h3));
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--ss-font-size-h4);
}

p {
  margin: 0 0 var(--ss-space-4);
}

/* Eyebrow (kicker) — DESIGN.md §4 */
.ss-eyebrow,
.sds-eyebrow {
  color: var(--ss-roxo-600);
  font-family: var(--ss-font-display);
  font-size: var(--ss-font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 var(--ss-space-3);
  text-transform: uppercase;
}

/* prefers-reduced-motion — DESIGN.md §7 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Layout helpers (legacy alias preservados) ───────────────────────────── */
.sds-page {
  min-height: 100vh;
}

.sds-container {
  margin-inline: auto;
  width: min(calc(100% - 2rem), var(--sds-container-max-width));
}

.sds-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 84px;
  padding-block: var(--sds-space-md);
}

.sds-logo {
  max-height: 44px;
  width: auto;
}

.sds-nav {
  align-items: center;
  display: flex;
  gap: var(--sds-space-lg);
}

@media (max-width: 1024px) {
  .sds-container {
    width: min(calc(100% - 1.5rem), 1024px);
  }
}

@media (max-width: 767px) {
  .sds-container {
    width: min(calc(100% - 1rem), 767px);
  }

  .sds-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sds-space-sm);
  }
}