/* ============================================================
   Contalents — Tokens oficiais
   Fonte: projeto "Design System 2" (claude.ai/design, 34c5ae12)
   Cópia fiel de tokens/{fonts,colors,spacing,typography,effects}.css

   NÃO editar valores aqui. Se um valor precisar mudar, muda no
   Design System 2 e ressincroniza este arquivo — senão o app
   sai de aderência silenciosamente.

   Único desvio: os caminhos de @font-face apontam para
   ../assets/fonts/ (nomes de arquivo locais do TalentInhA) e o
   Manrope local tem só 600/700/800, que é a faixa usada em
   título e número de destaque.
   ============================================================ */

/* ---------- Fontes (self-hosted; o DS2 proíbe fonte remota) ---------- */
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-display: "Manrope", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
}

/* ---------- Cor ---------- */
:root {
  /* Âncoras oficiais da marca */
  --night-900: #030b24;
  --night-800: #041035;
  --night-700: #06153f;
  --night-600: #10245c;
  --night-500: #1b3474;
  --night-400: #526593;
  --night-300: #8795b4;
  --night-200: #bac3d5;
  --night-100: #e3e7ef;
  --night-050: #f4f6fa;

  --violet-900: #250cc7;
  --violet-800: #3d16dc;
  --violet-700: #5521ee;
  --violet-600: #6327f8;
  --violet-500: #6f2bff;
  --violet-400: #8c58ff;
  --violet-300: #aa86ff;
  --violet-200: #ccb9ff;
  --violet-100: #e9e0ff;
  --violet-050: #f6f2ff;

  --precision-700: #3635c2;
  --precision-600: #3d6eea;
  --precision-500: #4f8bff;
  --precision-400: #72a3ff;
  --precision-300: #9bbdff;
  --precision-200: #c7daff;
  --precision-100: #e7efff;
  --precision-050: #f3f7ff;

  --lettering: #0b1630;
  --white: #ffffff;
  --cloud: #f3f4f7;
  --gray-050: #f8f9fb;
  --gray-100: #eef0f4;
  --gray-200: #dde1e8;
  --gray-300: #c7ced9;
  --gray-400: #98a3b3;
  --gray-500: #6d788a;
  --gray-600: #515c6d;
  --gray-700: #374151;
  --gray-800: #222b3a;
  --gray-900: #111827;

  /* Estado semântico — significado, nunca acento decorativo */
  --success-500: #17785b;
  --success-100: #def5ec;
  --warning-500: #a85b08;
  --warning-100: #fff1d6;
  --danger-500: #c9384f;
  --danger-100: #fde7eb;
  --info-500: var(--precision-600);
  --info-100: var(--precision-100);

  /* Apelidos semânticos */
  --brand-primary: var(--violet-500);
  --brand-primary-hover: var(--violet-700);
  --brand-accent: var(--precision-500);
  --brand-accent-hover: var(--precision-700);
  --cta-demo: var(--violet-500);
  --cta-demo-hover: var(--violet-700);

  --text-strong: var(--lettering);
  --text-body: #536075;
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --text-on-brand: var(--white);
  --text-link: var(--violet-700);

  --surface-page: var(--cloud);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-brand: var(--night-700);
  --surface-brand-soft: var(--violet-050);
  --surface-accent-soft: var(--precision-050);
  --surface-tile: var(--violet-050);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  /* O gradiente do símbolo é fixo e não deve ser aproximado.
     Ele pertence ao logo — não espalhar na interface. */
  --gradient-symbol-left: linear-gradient(135deg, #8439e7 0%, #6f2bff 55%, #250cc7 100%);
  --gradient-symbol-right: linear-gradient(315deg, #4f8bff 0%, #3d6eea 55%, #3635c2 100%);
  --gradient-brand: linear-gradient(135deg, #6f2bff 0%, #4f8bff 100%);
  --gradient-night: linear-gradient(135deg, #06153f 0%, #10245c 100%);
}

/* ---------- Espaço ---------- */
:root {
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-sm: 42rem;
  --container-md: 62rem;
  --container-lg: 75rem;

  /* Medida de leitura. Densidade contida começa por limitar a linha. */
  --measure-prose: 68ch;
  --measure-narrow: 46ch;

  /* Ritmo de linha em lista dividida e tabela — a alternativa a encaixotar item. */
  --row-padding-y: 0.75rem;
  --row-padding-y-tight: 0.5rem;
}

/* ---------- Tipografia (tokens) ---------- */
:root {
  --text-display: clamp(3.25rem, 7vw, 5.75rem);
  --text-h1: clamp(2.5rem, 5vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3.4vw, 2.25rem);
  --text-h3: clamp(1.125rem, 2vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  /* Escala de PRODUTO — derivada, para tela densa de operação.
     A escala acima é de peça e landing page: um h1 de 56px não
     cabe numa tela com sidebar de 245px e tabela de 12 colunas.
     Use estes tokens em título de tela e de seção. */
  --text-page-title: 1.75rem;
  --text-section-title: 1.25rem;
  --text-block-title: 1.0625rem;
}

/* ---------- Efeitos ---------- */
:root {
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-xs: 0 2px 8px rgba(6, 21, 63, 0.06);
  --shadow-sm: 0 8px 24px rgba(6, 21, 63, 0.08);
  --shadow-md: 0 14px 34px rgba(6, 21, 63, 0.12);
  --shadow-lg: 0 22px 48px rgba(6, 21, 63, 0.15);
  --shadow-xl: 0 32px 72px rgba(6, 21, 63, 0.2);
  --shadow-focus: 0 0 0 3px rgba(111, 43, 255, 0.24);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
}

:root {
  --layer-page: 0;
  --layer-card: 10;
  --layer-menu: 300;
  --layer-drawer: 500;
  --layer-modal: 700;
  --layer-toast: 900;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}