/* ==========================================================================
   Matapui Creatives: design tokens
   Elementor mapping: Site Settings > Global Colors / Global Fonts / Layout
   ========================================================================== */
:root {
  /* Colour (orange matches the live site; cream and ink from the brand guide) */
  --orange: #FF711D;            /* Matapui Orange, Brand Guidelines v2 */
  --orange-rgb: 255 113 29;      /* same colour as channels, for shadows and glows */
  --orange-deep: #E65A0A;        /* darker hover/label shade of the brand orange (not a guideline colour) */
  --peach: #FFC48A;
  --peach-soft: #FFE1BF;
  --cream: #FFF0D9;
  --cream-soft: #FFF8EC;
  --ink: #171717;
  --ink-soft: #3A3430;
  --white: #FFFFFF;

  /* Type */
  --font-heading: "DynaPuff", "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif; /* hero H1 + section H2 only */
  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(3rem, 6.3vw, 5.6rem);
  --fs-display: clamp(2.3rem, 5.4vw, 4.2rem);
  --fs-display-md: clamp(1.9rem, 4vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;

  /* Space and layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(2rem, 3.6vw, 3rem);
  --header-h: 76px;
  --wave-h: clamp(28px, 4.8vw, 72px);

  /* Shape and depth */
  --radius-pill: 999px;
  --shadow-soft: 0 12px 30px rgba(120, 60, 0, .14);
  --shadow-lift: 0 18px 40px rgba(120, 60, 0, .22);

  /* Motion (see motion.css). Springs are baked into linear() curves: settle = damping 1.0 (no overshoot),
     pop = damping ~0.72 (small overshoot, used only after a tap or for playful arrivals). */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --spring-settle: var(--ease);
  --spring-pop: cubic-bezier(.3, 1.4, .4, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-settle: linear(0, .1402, .3764, .584, .7361, .838, .9029, .9428, .9668, .9809, .9892, .9939, .9966, .9981, .9989, .9994, .9997, 1);
    --spring-pop: linear(0, .1193, .3578, .5992, .7911, .9206, .9951, 1.0293, 1.0384, 1.0344, 1.0253, 1.016, 1.0085, 1.0033, 1.0003, .9989, .9985, .9987, .999, .9994, .9997, 1);
  }
}