/* ============================================================
   jocca landing — tokens
   Espelha o design system do app (sos-viagem/src/index.css, DESIGN.MD):
   páginas creme editoriais, tinta quase preta, laranja só no CTA
   principal, azul do Jocca como cor de apoio.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* Wordmark "jocca" (mesmo do BrandLogo do app) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Superfícies */
  --canvas: #f9f7f3;
  --bone: #f3f0e8;
  --card: #ffffff;
  --dark: #202020;

  /* Texto */
  --ink: #202020;
  --body: #3a3a3a;
  --charcoal: #575757;
  --mute: #646464;
  --ash: #8d8d8d;
  --hairline: rgba(32, 32, 32, 0.12);
  --hairline-strong: rgba(32, 32, 32, 0.2);

  /* Marca */
  --orange: #fa8b23;
  --orange-hover: #e7790f;
  --orange-ink: #a94f00;
  --orange-soft: #fff0e0;
  --blue: #66a1f9;
  --blue-soft: #e8f1fe;
  --green: #2b9a66;

  /* Jocca / céu */
  --jocca-body: #6f9bd2;
  --jocca-outline: #4a2721;
  --sky-top: #8ec5ee;
  --sky-mid: #bfe0f6;
  --sky-low: #e6f2f8;
  --cloud: #fffdf8;
  --cloud-shade: #dfe9f1;

  /* Tipografia */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;

  /* Forma */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;
  --shadow-hover: 0 8px 24px rgba(32, 32, 32, 0.08);
  --shadow-lift: 0 18px 50px -20px rgba(32, 32, 32, 0.25);

  /* Espaço */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 10rem;
  --section-y: clamp(4.5rem, 10vw, 7.5rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --max-content: 1180px;
  --max-text: 640px;
  --nav-height: 68px;

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 260ms;
  --dur-slow: 600ms;

  /* ── Aliases dos nomes antigos (usados por css/tools.css) ── */
  --paper-bg: var(--canvas);
  --paper-warm: var(--bone);
  --paper-card: var(--card);
  --paper-page: var(--canvas);
  --ink-primary: var(--ink);
  --ink-secondary: var(--charcoal);
  --ink-muted: var(--mute);
  --brand-primary: var(--orange);
  --brand-primary-deep: var(--orange-ink);
  --brand-bg: var(--orange-soft);
  --border: var(--hairline);
  --font-body: var(--font-ui);
  --font-brand: var(--font-display);
  --shadow-sm: none;
  --shadow-lg: var(--shadow-hover);
  --shadow-xl: var(--shadow-lift);
}