/* Design tokens — MeuCPD
   Canvas branco, tipografia pesada com tracking negativo, pílulas 9999px.
   Cor de marca só em momentos de identidade: índigo e verde do logo. */
:root {
  /* Neutros */
  --canvas: #ffffff;
  --ink: #202020;
  --onyx: #090c1d;
  --carbon: #2a2a2a;
  --slate: #646464;
  --ash: #838383;
  --fog: #b3b3b3;
  --cloud: #d4d4d4;
  --bone: #e8e8e8;
  --mist: #f8f9fa;
  --plaster: #f1f2f5;

  /* Marca (extraídas do logo oficial) */
  --brand-indigo: #3e4095;
  --brand-indigo-soft: #eceefb;
  --brand-green: #23cd23;
  --brand-green-ink: #138a13;
  --brand-green-soft: #e7f9e7;

  /* Estados */
  --signal-blue: #0091ff;
  --amber: #f5a524;

  /* Superfícies escuras */
  --dark: #0b0b0c;
  --dark-2: #141416;
  --dark-line: rgba(255, 255, 255, 0.09);
  --dark-text: #b3b3b3;

  /* Gradientes */
  --gradient-brand: linear-gradient(92deg, #3e4095 0%, #4f5bd5 45%, #23cd23 110%);
  --gradient-conic: conic-gradient(from var(--angle), #3e4095 0%, #6b6fe0 18%, #23cd23 36%, #7be27b 46%, #0091ff 62%, #3e4095 80%, #3e4095 100%);

  /* Tipografia */
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-display: clamp(44px, 6.4vw, 80px);
  --text-heading-lg: clamp(36px, 4.6vw, 60px);
  --text-heading: clamp(30px, 3.6vw, 48px);
  --text-heading-sm: clamp(24px, 2.4vw, 34px);
  --text-subheading: 20px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-micro: 12px;

  /* Espaçamento (base 4px) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;
  --space-80: 80px;
  --space-100: 100px;

  /* Layout */
  --page-max: 1200px;
  --gutter: 24px;
  --section-gap: clamp(80px, 10vw, 128px);

  /* Raios */
  --radius-pill: 9999px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-image: 16px;
  --radius-large: 20px;

  /* Sombras */
  --shadow-sm: 0 4px 4px rgba(13, 21, 48, 0.04);
  --shadow-layer: 0 1px 1px -0.5px rgba(18, 43, 165, 0.04), 0 3px 3px -1.5px rgba(18, 43, 165, 0.04), 0 6px 6px -3px rgba(18, 43, 165, 0.04), 0 12px 12px -6px rgba(18, 43, 165, 0.04), 0 24px 24px -12px rgba(18, 43, 165, 0.04);
  --shadow-float: 0 24px 60px -20px rgba(9, 12, 29, 0.25), 0 8px 20px -8px rgba(9, 12, 29, 0.12);

  /* Movimento */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}