/* ==========================================================================
   GILTI — design tokens
   Loaded by every page. Pages use inline styles that read these variables
   (font-family:var(--font), height:var(--btn-h)…), so changing a value here
   changes it everywhere.
   ========================================================================== */

:root {
  /* ---- Typography: ONE family, everywhere ------------------------------- */
  /* Rhode-like Swiss grotesk; Inter Tight (Google Fonts, 400/500) is the fallback. */
  --font: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --weight-text: 400;            /* Body copy, prices */
  --weight-strong: 500;          /* Titles, buttons, labels — nothing heavier */
  --text-h1: clamp(30px, 2.8cqw, 40px);
  --text-h2: clamp(22px, 1.95cqw, 28px);
  --text-h3: clamp(18px, 1.4cqw, 20px);
  --text-body: 15px;             /* line-height 1.5 */
  --text-label: 12px;            /* Uppercase, letter-spacing .06em, weight 500 */
  --tracking-title: -0.01em;
  /* Hero titles on full-width images/videos: light weight (Helvetica Neue Light / Inter Tight 300) */
  --hero-title: 300 clamp(32px, 3.6cqw, 52px)/1.05 var(--font);   /* + letter-spacing:-0.02em */
  --hero-subtitle: 300 clamp(15px, 1.25cqw, 18px)/1.5 var(--font);
  --tracking-label: .06em;

  /* ---- Colours --------------------------------------------------------- */
  --color-text: #5F5E5A;         /* Warm grey body text */
  --color-title: #3A3A37;        /* Titles */
  --color-ink: #111111;          /* Filled buttons and footer only */
  --color-white: #FFFFFF;
  --color-muted: #555552;
  --color-subtle: #9A9A95;
  --color-surface: #F1F0EC;      /* Secondary sections (off-white) */
  --color-configurator: #FAFAF8; /* Configurator page background */
  --color-surface-2: #EFEFEC;    /* Media placeholders */
  --color-line: #E6E6E3;
  --color-line-strong: #D6D6D1;
  --color-teal: #21A2B6;
  --color-teal-ink: #17808F;
  --color-teal-light: #6FCAD8;
  --color-teal-tint: #D5EBEF;
  --color-error: #B3261E;
  --color-error-ink: #8A1C1C;
  --color-error-bg: #FDECEA;

  /* ---- Buttons: ONE component ------------------------------------------ */
  /* Primary: background var(--color-ink), white text.
     Secondary: transparent, 1px border in the text colour.
     On photo: transparent, white text and border. */
  --btn-h: 40px;
  --btn-px: 20px;
  --btn-r: 6px;
  --btn-fs: 12px;
  --btn-ls: .06em;
  --btn-fw: 500;

  /* ---- Spacing / motion -------------------------------------------------- */
  --gutter: clamp(18px, 1.8cqw, 28px);
  --header-height: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 2px solid var(--color-teal);
}

html, body { font-family: var(--font); font-weight: 400; }

.duo-charm-dialog::backdrop{background:rgba(0,0,0,.35)}
@media(max-width:640px){.duo-charm-dialog[open]{margin:auto 0 0;width:100%!important;max-width:none!important;border-radius:20px 20px 0 0!important;padding-bottom:max(24px,env(safe-area-inset-bottom))!important}}

[data-cfg-3d]::backdrop{background:rgba(0,0,0,.45)}