:root {
  --bg-default: #F5F2EC;
  --bg-subtle: #ECE7DE;
  --bg-surface-low: #FFFFFF;
  --bg-surface-high: #E3DDD2;
  --bg-inverse: #0F1C24;
  --bg-brand: #D7ECE8;
  --bg-accent: #D9F24B;
  --fg-on-default: #0F1C24;
  --fg-on-subtle: #0F1C24;
  --fg-on-inverse: #F5F2EC;
  --fg-on-brand: #0E3E39;
  --fg-on-accent: #0F1C24;
  --fg-secondary: #4A5560;
  --fg-disabled: #8C9399;
  --brand-primary: #177067;
  --brand-primary-hover: #0F5A52;
  --brand-secondary: #1F63C7;
  --brand-secondary-hover: #184FA0;
  --brand-accent: #FF5B38;
  --brand-accent-hover: #F2431E;
  --border-color-default: #C9C4BA;
  --border-color-subtle: #E1DCD2;
  --border-color-strong: #9C968B;
  --color-error: #B42318;
  --color-warning: #9A5B00;
  --color-info: #1F63C7;
  --color-success: #177067;

  --font-display-lg-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display-lg-size: clamp(2.9rem, 1.4rem + 5.6vw, 6.2rem);
  --font-display-lg-weight: 800;
  --font-display-lg-line-height: 0.92;
  --font-display-lg-letter-spacing: -0.03em;
  --font-display-md-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display-md-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --font-display-md-weight: 800;
  --font-display-md-line-height: 0.96;
  --font-display-md-letter-spacing: -0.025em;
  --font-headline-lg-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-headline-lg-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  --font-headline-lg-weight: 760;
  --font-headline-lg-line-height: 1.04;
  --font-headline-lg-letter-spacing: -0.02em;
  --font-headline-md-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-headline-md-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --font-headline-md-weight: 720;
  --font-headline-md-line-height: 1.1;
  --font-headline-md-letter-spacing: -0.012em;
  --font-headline-sm-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-headline-sm-size: 1.32rem;
  --font-headline-sm-weight: 700;
  --font-headline-sm-line-height: 1.18;
  --font-headline-sm-letter-spacing: -0.006em;
  --font-title-lg-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-title-lg-size: 1.16rem;
  --font-title-lg-weight: 680;
  --font-title-lg-line-height: 1.24;
  --font-title-lg-letter-spacing: -0.004em;
  --font-title-md-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-title-md-size: 1.02rem;
  --font-title-md-weight: 700;
  --font-title-md-line-height: 1.35;
  --font-title-md-letter-spacing: 0em;
  --font-body-lg-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body-lg-size: 1.16rem;
  --font-body-lg-weight: 400;
  --font-body-lg-line-height: 1.62;
  --font-body-lg-letter-spacing: 0em;
  --font-body-md-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body-md-size: 1.05rem;
  --font-body-md-weight: 400;
  --font-body-md-line-height: 1.66;
  --font-body-md-letter-spacing: 0em;
  --font-body-sm-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body-sm-size: 0.93rem;
  --font-body-sm-weight: 400;
  --font-body-sm-line-height: 1.55;
  --font-body-sm-letter-spacing: 0em;
  --font-label-lg-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label-lg-size: 1rem;
  --font-label-lg-weight: 700;
  --font-label-lg-line-height: 1.2;
  --font-label-lg-letter-spacing: 0em;
  --font-label-md-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label-md-size: 0.94rem;
  --font-label-md-weight: 700;
  --font-label-md-line-height: 1.15;
  --font-label-md-letter-spacing: 0.005em;
  --font-label-sm-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-label-sm-size: 0.74rem;
  --font-label-sm-weight: 700;
  --font-label-sm-line-height: 1.25;
  --font-label-sm-letter-spacing: 0.12em;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-xxl: 64px;
  --spacing-section-padding-y: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);
  --spacing-container-padding: clamp(16px, 4vw, 48px);

  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 12px;
  --border-radius-xl: 28px;
  --border-radius-quart: clamp(44px, 7vw, 120px);
  --border-radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15,28,36,0.08);
  --shadow-md: 0 14px 32px -16px rgba(15,28,36,0.28);
  --shadow-lg: 0 34px 70px -28px rgba(15,28,36,0.42);

  --container-max-width: 1400px;
  --container-padding-x: clamp(16px, 4vw, 48px);

/* alias legacy — ne pas utiliser dans les nouveaux blocs */
  --color-primary: var(--brand-primary);
  --color-primary-main: var(--brand-primary);
  --color-primary-light: var(--brand-primary);
  --color-primary-dark: var(--brand-primary-hover);
  --color-primary-contrast: var(--fg-on-brand);
  --color-secondary: var(--brand-secondary);
  --color-secondary-main: var(--brand-secondary);
  --color-secondary-light: var(--brand-secondary);
  --color-secondary-dark: var(--brand-secondary-hover);
  --color-secondary-contrast: var(--fg-on-brand);
  --color-accent: var(--brand-accent);
  --color-accent-main: var(--brand-accent);
  --color-accent-light: var(--brand-accent);
  --color-accent-dark: var(--brand-accent-hover);
  --color-accent-contrast: var(--fg-on-accent);
  --color-background: var(--bg-default);
  --color-background-default: var(--bg-default);
  --color-background-paper: var(--bg-subtle);
  --color-paper: var(--bg-subtle);
  --color-text-primary: var(--fg-on-default);
  --color-text-secondary: var(--fg-secondary);
  --color-text-disabled: var(--fg-disabled);
  --font-family-body: var(--font-body-md-family);
  --font-family-heading: var(--font-headline-lg-family);
  --font-size-base: var(--font-body-md-size);
  --font-size-small: var(--font-body-sm-size);
  --font-size-h1: var(--font-display-lg-size);
  --font-size-h2: var(--font-headline-lg-size);
  --font-size-h3: var(--font-headline-md-size);
  --font-size-h4: var(--font-headline-sm-size);
  --font-size-h5: var(--font-title-lg-size);
  --font-size-h6: var(--font-title-md-size);
  --line-height-body: var(--font-body-md-line-height);
  --line-height-heading: var(--font-headline-lg-line-height);
  --border-radius: var(--border-radius-md);
  --heading-letter-spacing: var(--font-headline-lg-letter-spacing);
  --heading-weight: var(--font-headline-lg-weight);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

[data-theme="dark"] {
  --bg-default: #0F1C24;
  --bg-subtle: #16262F;
  --bg-surface-low: #132229;
  --bg-surface-high: #1D303A;
  --bg-inverse: #F5F2EC;
  --bg-brand: #123C38;
  --bg-accent: #D9F24B;
  --fg-on-default: #F1EEE7;
  --fg-on-subtle: #F1EEE7;
  --fg-on-inverse: #0F1C24;
  --fg-on-brand: #CDEBE5;
  --fg-on-accent: #0F1C24;
  --fg-secondary: #AEB6BC;
  --fg-disabled: #6A757C;
  --brand-primary: #4FC2B4;
  --brand-primary-hover: #73D2C6;
  --brand-secondary: #6FA9F7;
  --brand-secondary-hover: #93BEF9;
  --brand-accent: #FF6E4E;
  --brand-accent-hover: #FF8B71;
  --border-color-default: #2B3E48;
  --border-color-subtle: #1E2F38;
  --border-color-strong: #4A5E69;
  --color-error: #F2867C;
  --color-warning: #F2B65A;
  --color-info: #6FA9F7;
  --color-success: #4FC2B4;
}

.block--tone-inverse {
  --bg-default: var(--bg-inverse);
  --bg-subtle: var(--bg-inverse);
  --bg-surface-low: var(--bg-inverse);
  --bg-surface-high: var(--bg-inverse);
  --bg-brand: var(--bg-inverse);
  --bg-accent: var(--bg-inverse);
  --fg-on-default: var(--fg-on-inverse);
  --fg-on-subtle: var(--fg-on-inverse);
  --fg-on-brand: var(--fg-on-inverse);
  --fg-on-accent: var(--fg-on-inverse);
  --fg-secondary: color-mix(in srgb, var(--fg-on-inverse) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-inverse) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-inverse) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-inverse) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-inverse) 36%, transparent);
}

.block--tone-shell-inverse [class$="__shell"],
.block--tone-shell-inverse [class*="__shell "] {
  --bg-default: var(--bg-inverse);
  --bg-subtle: var(--bg-inverse);
  --bg-surface-low: var(--bg-inverse);
  --bg-surface-high: var(--bg-inverse);
  --bg-brand: var(--bg-inverse);
  --bg-accent: var(--bg-inverse);
  --fg-on-default: var(--fg-on-inverse);
  --fg-on-subtle: var(--fg-on-inverse);
  --fg-on-brand: var(--fg-on-inverse);
  --fg-on-accent: var(--fg-on-inverse);
  --fg-secondary: color-mix(in srgb, var(--fg-on-inverse) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-inverse) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-inverse) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-inverse) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-inverse) 36%, transparent);
}

.block--tone-brand {
  --bg-default: var(--bg-brand);
  --bg-subtle: var(--bg-brand);
  --bg-surface-low: var(--bg-brand);
  --bg-surface-high: var(--bg-brand);
  --bg-inverse: var(--bg-brand);
  --bg-accent: var(--bg-brand);
  --fg-on-default: var(--fg-on-brand);
  --fg-on-subtle: var(--fg-on-brand);
  --fg-on-inverse: var(--fg-on-brand);
  --fg-on-accent: var(--fg-on-brand);
  --fg-secondary: color-mix(in srgb, var(--fg-on-brand) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-brand) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-brand) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-brand) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-brand) 36%, transparent);
}

.block--tone-shell-brand [class$="__shell"],
.block--tone-shell-brand [class*="__shell "] {
  --bg-default: var(--bg-brand);
  --bg-subtle: var(--bg-brand);
  --bg-surface-low: var(--bg-brand);
  --bg-surface-high: var(--bg-brand);
  --bg-inverse: var(--bg-brand);
  --bg-accent: var(--bg-brand);
  --fg-on-default: var(--fg-on-brand);
  --fg-on-subtle: var(--fg-on-brand);
  --fg-on-inverse: var(--fg-on-brand);
  --fg-on-accent: var(--fg-on-brand);
  --fg-secondary: color-mix(in srgb, var(--fg-on-brand) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-brand) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-brand) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-brand) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-brand) 36%, transparent);
}

.block--tone-accent {
  --bg-default: var(--bg-accent);
  --bg-subtle: var(--bg-accent);
  --bg-surface-low: var(--bg-accent);
  --bg-surface-high: var(--bg-accent);
  --bg-inverse: var(--bg-accent);
  --bg-brand: var(--bg-accent);
  --fg-on-default: var(--fg-on-accent);
  --fg-on-subtle: var(--fg-on-accent);
  --fg-on-inverse: var(--fg-on-accent);
  --fg-on-brand: var(--fg-on-accent);
  --fg-secondary: color-mix(in srgb, var(--fg-on-accent) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-accent) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-accent) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-accent) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-accent) 36%, transparent);
}

.block--tone-shell-accent [class$="__shell"],
.block--tone-shell-accent [class*="__shell "] {
  --bg-default: var(--bg-accent);
  --bg-subtle: var(--bg-accent);
  --bg-surface-low: var(--bg-accent);
  --bg-surface-high: var(--bg-accent);
  --bg-inverse: var(--bg-accent);
  --bg-brand: var(--bg-accent);
  --fg-on-default: var(--fg-on-accent);
  --fg-on-subtle: var(--fg-on-accent);
  --fg-on-inverse: var(--fg-on-accent);
  --fg-on-brand: var(--fg-on-accent);
  --fg-secondary: color-mix(in srgb, var(--fg-on-accent) 72%, transparent);
  --fg-disabled: color-mix(in srgb, var(--fg-on-accent) 45%, transparent);
  --border-color-default: color-mix(in srgb, var(--fg-on-accent) 18%, transparent);
  --border-color-subtle: color-mix(in srgb, var(--fg-on-accent) 8%, transparent);
  --border-color-strong: color-mix(in srgb, var(--fg-on-accent) 36%, transparent);
}