/*
 * ccpacks design tokens
 * ---------------------------------------------------------------------------
 * The single "aesthetically customizable" surface. Every visual value the
 * island uses is a `--ccpacks-*` custom property here, seeded from the Figma
 * variables (file ExpFzTkdZyPzci3rk0fZeT, node 95:2271). Override any of these
 * from the host theme or the plugin settings to re-skin the wizard.
 *
 * FONT OVERRIDE MECHANISM (important)
 * ---------------------------------------------------------------------------
 * The Figma design uses licensed fonts "Bw Beto" (display) and "Founders
 * Grotesk" (body) which we cannot ship. We substitute Cormorant Garamond and
 * Work Sans as close free stand-ins. When a real .woff2 is later provided, the
 * plugin settings page injects an @font-face and REDEFINES the two font tokens
 * — nothing else changes, so the design matches Figma exactly. Example of the
 * override the settings page would print into the page <head>:
 *
 *   @font-face {
 *     font-family: 'Bw Beto';
 *     src: url('.../bw-beto-light.woff2') format('woff2');
 *     font-weight: 300; font-display: swap;
 *   }
 *   :root {
 *     --ccpacks-font-display: 'Bw Beto', serif;
 *     --ccpacks-font-body: 'Founders Grotesk', sans-serif;
 *   }
 *
 * Because components only ever read the tokens, the swap needs no JS/markup
 * changes. Keep this contract intact: never hard-code a font-family in a rule.
 */

:root {
  /*
   * Colour tokens are named by ROLE, never by hue, so a restyle from the
   * Custom CSS box never leaves a misleading name behind. Defaults are the
   * Figma values; each comment says WHERE the token is used.
   */

  /* --- Brand colors (defaults from Figma) --- */
  --ccpacks-color-primary: #17234e;          /* text, buttons, borders, green-fees block 1 active day */
  --ccpacks-color-primary-strong: #23254e;   /* headings, CTA hover, form controls, PDF button */
  --ccpacks-color-background: #f7edf4;       /* page background */
  --ccpacks-color-background-alt: #f4e4f1;   /* header bars, panels, form cards, guest boxes */

  /* --- Neutrals (defaults from Figma icon styles) --- */
  --ccpacks-color-neutral-strong: #3c4043;   /* group banner body text */
  --ccpacks-color-neutral-soft: #babcbe;     /* reserved (not used by the shipped CSS) */

  /* --- Accents (defaults from Figma) --- */
  --ccpacks-color-accent-1: #739cce;         /* green-fees block 1 background tint (95:710) */
  --ccpacks-color-accent-2: #fbe297;         /* green-fees block 2, gracias golf rounds highlight */
  --ccpacks-color-accent-3: #ce84ab;         /* green-fees block 3 */
  --ccpacks-color-accent-4: #b5bfa6;         /* green-fees block 4, Pago/Gracias total box */
  --ccpacks-color-accent-5: #cbb6d8;         /* Configure summary card (95:2165), media placeholders, Pago layout block */
  --ccpacks-color-accent-6: #b2c7f5;         /* gracias lead-guest box (95:319) */
  --ccpacks-color-accent-7: #409c5b;         /* reserved Figma palette accent (not used by the shipped CSS) */

  /* --- Surfaces / text roles --- */
  --ccpacks-color-text: var(--ccpacks-color-primary);
  --ccpacks-color-text-muted: rgba(23, 35, 78, 0.56); /* Figma: price line at 56% */
  --ccpacks-color-surface: #ffffff;
  --ccpacks-color-on-primary: #ffffff;
  --ccpacks-color-hairline: rgba(23, 35, 78, 0.5); /* 0.5px primary-tinted dividers */

  /* --- Typography families (OVERRIDABLE — see header note) --- */
  --ccpacks-font-display: 'Cormorant Garamond', serif;   /* substitute for "Bw Beto" */
  --ccpacks-font-body: 'Work Sans', sans-serif;          /* substitute for "Founders Grotesk" */

  /* --- Type scale (from Figma) --- */
  --ccpacks-font-size-display-hero: 99px;  /* "NUESTROS PAQUETES" hero */
  --ccpacks-font-size-display: 56px;       /* "PAQUETE BIRDIE" / footer "SO/" */
  --ccpacks-font-size-header-lg: 32px;     /* card "N NOCHES" */
  --ccpacks-font-size-header: 24px;
  --ccpacks-font-size-header-sm: 16px;
  --ccpacks-font-size-body: 16px;
  --ccpacks-font-size-subheader: 14px;

  /* Fluid heading sizes: shrink with the viewport on phones (down to 320px)
     and reach the fixed Figma size well before 1024px, so desktop is
     unchanged. Headings read these; override the base tokens above to re-size. */
  --ccpacks-font-size-display-hero-fluid: clamp(40px, 16vw, var(--ccpacks-font-size-display-hero));
  --ccpacks-font-size-display-fluid: clamp(28px, 8.5vw, var(--ccpacks-font-size-display));
  --ccpacks-font-size-header-lg-fluid: clamp(24px, 7.5vw, var(--ccpacks-font-size-header-lg));
  --ccpacks-font-size-header-fluid: clamp(20px, 6vw, var(--ccpacks-font-size-header));

  --ccpacks-font-weight-display: 500;      /* Figma weights are "Light" */
  --ccpacks-font-weight-body: 300;

  --ccpacks-line-height-tight: 1;          /* Figma lineHeight 100 */
  --ccpacks-line-height-body: 1.4;

  --ccpacks-letter-spacing-display: -0.04em; /* tight, ~-3.2px @ 80px */
  --ccpacks-letter-spacing-header: -0.03em;
  --ccpacks-letter-spacing-body: 0.02em;     /* ~0.32px @ 16px */
  --ccpacks-letter-spacing-subheader: 0.1em; /* wide subheader (Figma 1.4px@14 / 2.4px@24) */
  --ccpacks-word-spacing-titles: -0.04em; /* Espacio entre palabras subtitulos*/

  /* --- Layout --- */
  --ccpacks-content-max-width: 1400px;
  --ccpacks-scroll-offset: 0px;       /* step-change scroll clearance; set to the host theme's fixed-header height */
  --ccpacks-content-padding-x: 16px;   /* lateral padding rule */
  --ccpacks-gap-cards: 24px;
  --ccpacks-gap-stack: 32px;
  --ccpacks-card-min-width: 300px;  /* min track width; grid wraps for any variant count */
  --ccpacks-section-pt: 56px;
  --ccpacks-section-pb: 128px;

  /* --- Shape --- */
  --ccpacks-radius-pill: 508px;
  --ccpacks-button-height: 56px;
  --ccpacks-card-media-height: 278px;
}