:root {
  /* Raw brand palette */
  --color-white: #ffffff;
  --color-cream-050: #f5f2ea;
  --color-cream-100: #fbf9f5;
  --color-sand-200: #d9d0c5;
  --color-sand-250: #dce9e1;
  --color-clay-400: #94bba8;
  --color-terra-500: #c96b3b;
  --color-bark-700: #497266;
  --color-moss-700: #274438;
  --color-ink-900: #17352b;
  --color-ink-800: #1f3129;
  --color-muted-500: rgba(31, 49, 41, 0.68);
  --color-info-600: #1e5fa3;
  --color-danger-700: #a0121a;
  --color-sky-050: #eef5fc;

  /* Semantic colors */
  --surface-page: var(--color-cream-050);
  --surface-section: var(--color-cream-100);
  --surface-soft: var(--color-sand-200);
  --surface-card: var(--color-white);
  --surface-accent: var(--color-clay-400);
  --surface-dark: var(--color-ink-900);

  --text-strong: var(--color-ink-900);
  --text-base: var(--color-ink-800);
  --text-muted: var(--color-muted-500);
  --text-on-dark: var(--color-white);

  --border-soft: rgba(30, 26, 22, 0.1);
  --border-strong: rgba(30, 26, 22, 0.18);

  --action-primary: var(--color-terra-500);
  --action-primary-hover: #ac5128;
  --action-secondary: var(--color-bark-700);
  --status-info: var(--color-info-600);
  --status-danger: var(--color-danger-700);

  /* Typography */
  --font-body: "Roboto", Arial, sans-serif;
  --font-display: "DM Sans", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 10px 30px rgba(30, 26, 22, 0.05);
  --shadow-md: 0 18px 45px rgba(30, 26, 22, 0.08);
  --shadow-lg: 0 24px 60px rgba(30, 26, 22, 0.12);

  /* Layout */
  --container-max: 1180px;
  --bp-sm: 540px;
  --bp-md: 800px;
  --bp-lg: 1080px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.28s ease;

  /* Legacy aliases kept for current pages */
  --warm-white: var(--surface-page);
  --cream: var(--surface-section);
  --sand: var(--surface-soft);
  --clay: var(--surface-accent);
  --terra: var(--action-primary);
  --bark: var(--action-secondary);
  --moss: var(--color-moss-700);
  --sage: var(--color-moss-700);
  --sage-light: var(--surface-soft);
  --sage-dark: var(--text-base);
  --charcoal: var(--text-strong);
  --charcoal-muted: var(--text-base);
  --mid: var(--text-base);
  --hero-portrait-pos: center center;

  /* Existing shared-sheet aliases */
  --c-bg: var(--JS_Fond-principal);
  --c-bg-alt: var(--surface-card);
  --c-bg-soft: var(--JS_Ivoire-doux);
  --c-dark: var(--text-strong);
  --c-text: var(--JS_Texte-principal);
  --c-text-strong: var(--text-base);
  --c-accent: var(--JS_Logo_vert-Fonce);
  --c-accent-strong: var(--JS_Vert-principal);
  --c-border: var(--border-soft);
  --c-border-strong: var(--border-strong);
  --c-white: var(--color-white);

  --ff-body: var(--font-body);
  --ff-display: var(--font-display);
  --max-w: var(--container-max);
  --transition: var(--transition-base);

  /* Palette JS Ambiance Peinture */
  --JS_Logo_vert-principal: #94bba8;
  --JS_Logo_vert-Fonce: #497266;
  --JS_Logo_Terra: #bd511c;
  --JS_vert-clair-E1: #dce9e1;
  --JS_sage-soft: #a5b5a6;
  --JS_sage-dark: #5e7d6e;
  --JS_Fond-principal: #f5f2ea;
  --JS_Blanc-casse: #fbf9f5;
  --JS_Ivoire-doux: #f6f3ee;
  --JS_Vert-principal: #274438;
  --JS_Vert-profond: #17352b;
  --JS_Terracotta-CTA: #c96b3b;
  --JS_Terracotta-hover: #ac5128;
  --JS_Texte-principal: #1f3129;
  --JS_Bordures-fines: rgba(39, 68, 56, 0.14);
  --JS_Verre-depoli: rgba(251, 249, 245, 0.78);
}