/*
 * Design tokens for southsideblooms.com.
 *
 * Loaded on every front-end page after Elementor's kit stylesheet by
 * SSB_Site_Design (includes/class-site-design.php). The values mirror the
 * live Elementor kit (Site Settings) as of 2026-09-21.
 *
 * The Elementor mapping block at the bottom is commented out on purpose:
 * while it stays commented this file changes nothing on the site. To make
 * Elementor's global colours and fonts follow these tokens, uncomment the
 * block (or only the lines you need) and then change the token values,
 * never the mapping. See README.md in this folder.
 */
:root {
  /* Elementor kit roles (Site Settings > Global Colors) */
  --ssb-color-primary: #9f76be;
  --ssb-color-secondary: #ffffff;
  --ssb-color-text: #483c51;
  --ssb-color-accent: #9f76be;

  /* Kit custom colours in use across the site */
  --ssb-color-ink: #2b2b29;
  --ssb-color-black: #000000;
  --ssb-color-white: #ffffff;
  --ssb-color-gray: #5c5c5c;
  --ssb-color-charcoal: #1e1e1e;
  --ssb-color-lavender-50: #f8efff;
  --ssb-color-lavender-100: #e2d1ef;
  --ssb-color-lavender-200: #d0b3e5;
  --ssb-color-lavender-400: #9e81b4;
  --ssb-color-violet-400: #8d7acb;
  --ssb-color-plum-700: #5e5069;
  --ssb-color-purple-900: #422954;

  /* Elementor kit typography roles (family, weight) */
  --ssb-font-primary: "Roboto", sans-serif;
  --ssb-font-primary-weight: 600;
  --ssb-font-secondary: "Roboto Slab", serif;
  --ssb-font-secondary-weight: 400;
  --ssb-font-text: "Roboto", sans-serif;
  --ssb-font-text-weight: 400;
  --ssb-font-accent: "Roboto", sans-serif;
  --ssb-font-accent-weight: 500;
  /* Display face used by the shop and careers design system */
  --ssb-font-display: "Poppins", sans-serif;

  /* Shape and spacing scale */
  --ssb-radius-sm: 6px;
  --ssb-radius-md: 10px;
  --ssb-radius-lg: 18px;
  --ssb-radius-pill: 999px;
  --ssb-space-1: 8px;
  --ssb-space-2: 16px;
  --ssb-space-3: 24px;
  --ssb-space-4: 32px;
  --ssb-space-6: 48px;
  --ssb-space-8: 64px;
  --ssb-shadow-sm: 0 1px 2px rgba(43, 43, 41, 0.08);
  --ssb-shadow-md: 0 8px 24px rgba(43, 43, 41, 0.12);
}

/*
 * Elementor kit mapping (disabled). Elementor writes its globals as CSS
 * custom properties on body.elementor-kit-{id}; the attribute selector
 * below matches whatever kit id staging and production use, and it is
 * more specific than Elementor's own `.elementor-kit-{id}` rule.

body[class*="elementor-kit-"] {
  --e-global-color-primary: var(--ssb-color-primary);
  --e-global-color-secondary: var(--ssb-color-secondary);
  --e-global-color-text: var(--ssb-color-text);
  --e-global-color-accent: var(--ssb-color-accent);
  --e-global-typography-primary-font-family: var(--ssb-font-primary);
  --e-global-typography-primary-font-weight: var(--ssb-font-primary-weight);
  --e-global-typography-secondary-font-family: var(--ssb-font-secondary);
  --e-global-typography-secondary-font-weight: var(--ssb-font-secondary-weight);
  --e-global-typography-text-font-family: var(--ssb-font-text);
  --e-global-typography-text-font-weight: var(--ssb-font-text-weight);
  --e-global-typography-accent-font-family: var(--ssb-font-accent);
  --e-global-typography-accent-font-weight: var(--ssb-font-accent-weight);
}
*/