/* ============================================================
   MOBAPE · Design Tokens
   Fonte da verdade: design_handoff_mobape_website (paleta Trópico)
   Não introduzir novos hex — derivar tons a partir do Teal.
   ============================================================ */

:root {
  /* ---------- Cores · Paleta Trópico ---------- */
  --ink: #0A4D52;        /* Teal · tinta principal (texto, símbolo, fundos profundos) */
  --accent: #FF8C42;     /* Papaia · acento — UM por ecrã */
  --paper: #E5F3F4;      /* Areia · fundo principal de superfícies claras */
  --night: #051A1C;      /* Noite · texto sobre claro, UI dark */
  --white: #FBFCFC;      /* Branco quente para cartões */

  /* Tons derivados do Teal (opacidades) — nunca hex novos */
  --line: rgba(10, 77, 82, 0.12);     /* linhas divisórias */
  --line-strong: rgba(10, 77, 82, 0.22);
  --muted: rgba(5, 26, 28, 0.6);      /* texto secundário / labels */
  --ink-08: rgba(10, 77, 82, 0.08);
  --ink-15: rgba(10, 77, 82, 0.15);
  --ink-04: rgba(10, 77, 82, 0.04);
  --accent-12: rgba(255, 140, 66, 0.12);
  --accent-soft: rgba(255, 140, 66, 0.18);

  /* Corpo de texto */
  --body: #051A1C;

  /* ---------- Tipografia ---------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;  /* display, headings */
  --font-sans: "DM Sans", system-ui, sans-serif;            /* corpo, UI */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;   /* labels técnicos */

  /* Tracking */
  --track-tightest: -0.045em;
  --track-tighter: -0.03em;
  --track-tight: -0.025em;
  --track-label: 0.08em;

  /* ---------- Espaçamento (escala do handoff) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* Gap entre secções verticais */
  --section-gap: 96px;
  --section-gap-mobile: 64px;

  /* ---------- Border radius ---------- */
  --radius-pill: 999px;
  --radius-card: 18px;        /* default cartões (14–22px) */
  --radius-card-lg: 22px;
  --radius-surface: 24px;     /* surfaces grandes (hero block) */
  --radius-app: 36px;         /* app icon iOS */

  /* ---------- Sombras ---------- */
  --shadow-card: 0 12px 32px rgba(10, 77, 82, 0.12);   /* cartão flutuante */
  --shadow-app: 0 16px 32px rgba(10, 77, 82, 0.18);    /* app icon */
  --shadow-splash: 0 16px 48px rgba(10, 77, 82, 0.25); /* phone splash */
  --shadow-soft: 0 4px 16px rgba(10, 77, 82, 0.06);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --nav-h: 76px;

  /* ---------- Transições ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}