/* tokens.css — runtime design tokens (FE + editor).
   Active subset from catalog via npm run tokens:sync.
   Full Figma catalog: figma-tokens-sync/generated/tokens.generated.css
   Site overlay source: assets/src/css/tokens.theme.css
   Do not edit this file directly. */

/* --- Primitives (from Figma _Primitives) --- */
:root {
  --primitive-brand-400: #6F73FF;
  --primitive-brand-500: #574EFF;
  --primitive-brand-600: #533AFD;
  --primitive-brand-700: #3E22E0;
  --primitive-brand-800: #331FB4;
  --primitive-brand-900: #2D228D;
  --primitive-green-100: #DCFCE7;
  --primitive-green-300: #86EFAC;
  --primitive-green-400: #4ADE80;
  --primitive-green-500: #22C55E;
  --primitive-green-600: #16A34A;
  --primitive-green-700: #15803D;
  --primitive-neutral-100: #F5F5F5;
  --primitive-neutral-200: #E5E5E5;
  --primitive-neutral-300: #D4D4D4;
  --primitive-neutral-400: #A3A3A3;
  --primitive-neutral-50: #FAFAFA;
  --primitive-neutral-500: #737373;
  --primitive-neutral-600: #525252;
  --primitive-neutral-700: #404040;
  --primitive-neutral-800: #262626;
  --primitive-neutral-900: #171717;
  --primitive-neutral-950: #0A0A0A;
  --primitive-neutral-warm-50: #F0EFEB;
  --primitive-red-600: #DC2626;
  --primitive-white: #FFFFFF;
}

/* --- Semantic tokens + spacing + radius (light mode) --- */
:root {
  --color-bg-brand-section: var(--primitive-brand-800);
  --color-bg-brand-solid: var(--primitive-brand-600);
  --color-bg-brand-solid-hover: var(--primitive-brand-700);
  --color-bg-error-solid: var(--primitive-red-600);
  --color-bg-primary: var(--primitive-neutral-warm-50);
  --color-bg-primary-alt: var(--primitive-white);
  --color-bg-primary-hover: var(--primitive-neutral-50);
  --color-bg-secondary: var(--primitive-neutral-50);
  --color-bg-success-secondary: var(--primitive-green-100);
  --color-bg-success-solid: var(--primitive-green-600);
  --color-bg-tertiary: var(--primitive-neutral-100);
  --color-border-brand: var(--primitive-brand-500);
  --color-border-primary: var(--primitive-neutral-300);
  --color-border-secondary: var(--primitive-neutral-200);
  --color-border-tertiary: var(--primitive-neutral-600);
  --color-fg-primary: var(--primitive-neutral-900);
  --color-fg-success-primary: var(--primitive-green-600);
  --color-fg-white: var(--primitive-white);
  --color-text-brand-primary: var(--primitive-brand-900);
  --color-text-brand-secondary: var(--primitive-brand-700);
  --color-text-placeholder: var(--primitive-neutral-500);
  --color-text-primary: var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-700);
  --color-text-secondary-hover: var(--primitive-neutral-800);
  --color-text-success-primary: var(--primitive-green-600);
  --color-text-tertiary: var(--primitive-neutral-600);
  --color-text-white: var(--primitive-white);
  --color-utility-green-400: var(--primitive-green-400);
  --color-utility-green-700: var(--primitive-green-700);
  --color-utility-neutral-700: var(--primitive-neutral-700);
  --color-utility-neutral-800: var(--primitive-neutral-800);

  /* Spacing */
  --spacing-10xl: 8rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;
  --spacing-5xl: 2.5rem;
  --spacing-6xl: 3rem;
  --spacing-7xl: 4rem;
  --spacing-8xl: 5rem;
  --spacing-9xl: 6rem;
  --spacing-lg: 0.75rem;
  --spacing-md: 0.5rem;
  --spacing-sm: 0.375rem;
  --spacing-xl: 1rem;
  --spacing-xs: 0.25rem;
  --spacing-xxs: 0.125rem;

  /* Radius */
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --radius-lg: 0.625rem;
  --radius-md: 0.5rem;
  --radius-xxs: 0.125rem;

  /* Typography */
  --font-family-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* --- Dark mode semantics (explicit only; OS preference is ignored) --- */
[data-color-scheme="dark"] {
  --color-bg-brand-section: var(--primitive-neutral-50);
  --color-bg-brand-solid: var(--primitive-brand-600);
  --color-bg-brand-solid-hover: var(--primitive-brand-500);
  --color-bg-error-solid: var(--primitive-red-600);
  --color-bg-primary: var(--primitive-neutral-950);
  --color-bg-primary-alt: var(--primitive-neutral-50);
  --color-bg-primary-hover: var(--primitive-neutral-900);
  --color-bg-secondary: var(--primitive-neutral-900);
  --color-bg-success-secondary: var(--primitive-green-600);
  --color-bg-success-solid: var(--primitive-green-600);
  --color-bg-tertiary: var(--primitive-neutral-800);
  --color-border-brand: var(--primitive-brand-400);
  --color-border-primary: var(--primitive-neutral-700);
  --color-border-secondary: var(--primitive-neutral-800);
  --color-border-tertiary: var(--primitive-neutral-600);
  --color-fg-primary: var(--primitive-white);
  --color-fg-success-primary: var(--primitive-green-500);
  --color-fg-white: var(--primitive-white);
  --color-text-brand-primary: var(--primitive-neutral-50);
  --color-text-brand-secondary: var(--primitive-neutral-300);
  --color-text-placeholder: var(--primitive-neutral-500);
  --color-text-primary: var(--primitive-neutral-50);
  --color-text-secondary: var(--primitive-neutral-300);
  --color-text-secondary-hover: var(--primitive-neutral-200);
  --color-text-success-primary: var(--primitive-green-400);
  --color-text-tertiary: var(--primitive-neutral-400);
  --color-text-white: var(--primitive-white);
  --color-utility-green-400: var(--primitive-green-600);
  --color-utility-green-700: var(--primitive-green-300);
  --color-utility-neutral-700: var(--primitive-neutral-300);
  --color-utility-neutral-800: var(--primitive-neutral-200);
}

/* --- Site overlay (tokens.theme.css) --- */
:root {
	--container-padding: clamp(1rem, 0.25rem + 2vw, 2rem);
	--content-width: var(--wp--custom--layout--content-max, var(--width-3xl));
	--header-height: var(--wp--custom--layout--header-height, 100px);
	--header-width: var(--wp--custom--layout--header-width, var(--width-3xl));
	--post-width: var(--wp--custom--layout--post-width, var(--paragraph-max-width));
	--spacing: var(--wp--custom--layout--spacing-unit, 0.25rem);
	--box-border-radius: var(--wp--custom--components--radius-box, var(--radius-lg));
	--avatar-border-radius: var(--wp--custom--components--avatar-radius, 50%);
	--o-chevron-icon: var(--wp--custom--icon--chevron, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23171717"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>'));
	--text-color: var(--color-text-primary);
	--border-color: var(--color-border-secondary);
	--primary-font: var(--wp--preset--font-family--sans, 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif);
	--menu-desktop-bg-color: var(--color-bg-primary);
	--menu-desktop-link-color: var(--color-text-primary);
	--menu-mobile-link-color: var(--color-text-primary);
	--colour-menu-burger: var(--color-fg-primary);
	--button-primary-bg-color: var(--color-bg-brand-solid);
	--button-primary-label-color: var(--color-text-white);
	--fs-100: var(--wp--preset--font-size--text-xs);
	--fs-200: var(--wp--preset--font-size--text-sm);
	--base-font-size: 16px;
	--width-3xl: 80rem;
	--paragraph-max-width: 45rem;
	--line-height-display-xs: 1.33;
	--line-height-text-lg: 1.56;
	--line-height-text-md: 1.5;
	--line-height-text-sm: 1.43;
	--color-alpha-white-20: rgba(255, 255, 255, 0.2);
	--color-alpha-white-30: rgba(255, 255, 255, 0.3);
	--color-bg-footer: var(--primitive-neutral-900);
	--color-bg-header-dark: var(--primitive-neutral-900);
	--color-text-footer: var(--primitive-neutral-500);
	--color-bg-testimonial-large: var(--primitive-neutral-800);
}