/*
 * Design tokens.
 * WordPress: these map one to one onto theme.json
 *   colours  -> settings.color.palette
 *   fonts    -> settings.typography.fontFamilies
 *   sizes    -> settings.typography.fontSizes
 *   spacing  -> settings.spacing.spacingSizes
 *   radius / shadow -> settings.custom
 * See README.md for the full map.
 */
:root {
  /* Colour */
  --bp-ink: #1d1d1f;
  --bp-ink-2: #3a3a3c;
  --bp-muted: #6e6e73;
  --bp-paper: #ffffff;
  --bp-wash: #f5f5f7;
  --bp-line: #e5e5ea;
  --bp-accent: #d7141a;        /* Big Padlock red */
  --bp-accent-ink: #ffffff;
  --bp-trust: #00b67a;         /* Trustpilot green, reviews only */

  /* Drifting colour shapes behind the glass */
  --bp-wash-red: rgba(215, 20, 26, .38);
  --bp-wash-amber: rgba(255, 170, 90, .36);
  --bp-wash-blue: rgba(90, 150, 255, .30);

  /* Glass */
  --bp-glass: rgba(255, 255, 255, .46);
  --bp-glass-strong: rgba(255, 255, 255, .72);
  --bp-glass-rim: rgba(255, 255, 255, .85);
  --bp-glass-blur: 24px;

  /* Type */
  --bp-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bp-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bp-size-xs: .8125rem;   /* 13 */
  --bp-size-s: .9375rem;    /* 15 */
  --bp-size-m: 1.0625rem;   /* 17 */
  --bp-size-l: 1.375rem;    /* 22 */
  --bp-size-xl: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);   /* section titles */
  --bp-size-xxl: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);  /* hero */

  /* Space: one 4px-based scale (pbakaus/layout). Tight steps group related
     things; generous steps separate sections. Use these, never one-off values. */
  --bp-space-1: .25rem;   /* 4   hairline gaps, icon to label */
  --bp-space-2: .5rem;    /* 8   inside chips and pills */
  --bp-space-3: .75rem;   /* 12  heading to its own text */
  --bp-space-4: 1rem;     /* 16  between sibling cards */
  --bp-space-5: 1.5rem;   /* 24  card padding, page gutter */
  --bp-space-6: 2rem;     /* 32  between groups inside a section */
  --bp-space-7: 3rem;     /* 48  section heading to section content */
  --bp-space-8: 4rem;     /* 64  inside large feature panels */
  --bp-space-section: clamp(5rem, 3.5rem + 5vw, 8rem); /* 80 to 128 between sections */

  /* Shape */
  --bp-radius-s: 14px;
  --bp-radius-m: 22px;
  --bp-radius-l: 28px;
  --bp-radius-pill: 999px;
  --bp-shadow: 0 20px 50px rgba(20, 20, 40, .12);
  --bp-shadow-soft: 0 8px 30px rgba(20, 20, 40, .08);

  --bp-container: 1200px;
}

/* Motion (12 principles: few, reused durations; ease-out in, ease-in out) */
:root {
  --bp-dur-1: 150ms;   /* micro feedback */
  --bp-dur-2: 250ms;   /* UI state changes */
  --bp-dur-3: 600ms;   /* scroll reveals */
  --bp-ease-out: cubic-bezier(.22, 1, .36, 1);
  --bp-ease-in: cubic-bezier(.55, 0, 1, .45);
  --bp-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --bp-stagger: 70ms;
}