/* ============================================================
   tokens.css — design tokens (custom properties)
   Paleta oficial da Jumps (Brandbook):
     Magenta  #E52862   Ciano  #43BDDE   Ameixa  #3F3354
     Roxo     #7A6CFF   Verde  #32CC7E   Laranja #FFAC48
   --color-brand usa uma variação levemente mais escura do
   magenta (#CE1C56) para garantir contraste WCAG AA em texto,
   links e botões; --color-brand-vivid guarda o magenta puro
   para uso decorativo (símbolo, gradientes, seções escuras).
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Cor ---- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f1ecfb;
  --color-bg-inverse: #3f3354;
  --color-bg-inverse-subtle: #342a46;

  /* Lavagens da paleta secundária — fundos de seção */
  --tint-cyan: #d6eef7;
  --tint-magenta: #fbe0ec;
  --tint-purple: #e7e2fd;
  --tint-mint: #d9f2e6;
  --tint-amber: #ffe9cd;

  --color-text: #241d33;
  --color-text-muted: #5c5570;
  --color-text-inverse: #f7f5fb;
  --color-text-inverse-muted: #c4bcd6;

  --color-brand: #ce1c56;
  --color-brand-hover: #ac1548;
  --color-brand-vivid: #e52862;
  --color-brand-contrast: #ffffff;
  --color-brand-tint: #fdeef3;

  --color-accent: #2aa7c7; /* ciano com contraste AA sobre branco */
  --color-accent-vivid: #43bdde;
  --color-accent-tint: #ebf8fc;
  --color-accent-on-dark: #6fd0ea;

  --color-support-purple: #7a6cff;
  --color-support-green: #32cc7e;
  --color-support-orange: #ffac48;

  --color-border: #e7e3ee;
  --color-border-strong: #cbc4d8;
  --color-border-inverse: #574a6d;

  --color-success: #1f7a4d;
  --color-warning: #8a5a00;
  --color-error: #c0362c;
  --color-info: var(--color-brand);

  --color-focus: #7a6cff;

  /* ---- Tipografia ---- */
  --font-sans:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-display-xl: clamp(2.75rem, 8vw, 7.5rem);
  --fs-display: clamp(2.375rem, 6vw, 5.75rem);
  --fs-h1: clamp(2.125rem, 5vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.4rem, 2.5vw, 2.25rem);
  --fs-h4: 1.1875rem;
  --fs-body-lg: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-display: 1.02;
  --lh-heading: 1.14;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Espaçamento (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --section-y: clamp(4rem, 9vw, 9rem);
  --section-y-tight: clamp(3rem, 6vw, 5.5rem);

  /* ---- Containers ---- */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* ---- Bordas / raios ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--color-border);

  /* ---- Sombras (uso contido) ---- */
  --shadow-sm: 0 1px 2px rgba(36, 29, 51, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(36, 29, 51, 0.2);
  --shadow-lg: 0 24px 64px -20px rgba(36, 29, 51, 0.3);

  /* ---- Gradientes da marca (paleta secundária) ---- */
  --gradient-brand: linear-gradient(135deg, #e52862, #7a6cff);
  --gradient-cool: linear-gradient(135deg, #43bdde, #7a6cff);
  --gradient-deep: linear-gradient(160deg, #3f3354, #1f1830);
  --gradient-inverse: linear-gradient(155deg, #45385c 0%, #342a46 45%, #2a2340 100%);

  /* ---- Motion ---- */
  --dur-micro: 150ms;
  --dur-ui: 240ms;
  --dur-reveal: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --header-h: 72px;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* Escopo de seção escura reutilizável (ameixa da marca) */
.theme-inverse {
  --color-bg: var(--color-bg-inverse);
  --color-bg-subtle: var(--color-bg-inverse-subtle);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-border: var(--color-border-inverse);
  --color-border-strong: #6b5d84;
  --color-brand: var(--color-brand-vivid);
  --color-brand-hover: #ff4d80;
  --color-brand-tint: #4a3d61;
  --color-accent: var(--color-accent-on-dark);
  color-scheme: dark;
  background: var(--gradient-inverse);
  color: var(--color-text-inverse);
}