:root,
.editor-styles-wrapper {
  /* Brand primary */
  --color-brand-blue: #00B2CC;
  --color-brand-red: #ED3F30;
  --color-brand-dark: #333232;

  /* Neutrals */
  --color-neutral-dark: #333232;
  --color-neutral-medium: #5C6464;
  --color-neutral: #8E9191;
  --color-neutral-blue: #A3B0B3;
  --color-neutral-light: #EAEAEA;

  /* Data / software palette */
  --color-data-navy: #003A5D;
  --color-data-red: #ED3F30;
  --color-data-blue: #00B2CC;
  --color-data-orange: #EF8936;
  --color-data-purple-dark: #764FA0;
  --color-data-yellow: #E7E51A;
  --color-data-purple: #B65DA4;
  --color-data-green: #8AC640;

  /* Backgrounds */
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F7F7;
  --color-bg-elevated: #FFFFFF;

  /* Borders & outlines */
  --color-border-subtle: #EAEAEA;
  --color-border-strong: #8E9191;

  /* States */
  --color-state-info: #00B2CC;
  --color-state-success: #8AC640;
  --color-state-warning: #EF8936;
  --color-state-danger: #ED3F30;

  /* Text */
  --color-text-main: #333232;
  --color-text-subtle: #5C6464;
  --color-text-on-dark: #FFFFFF;
  --color-link: #00B2CC;
  --color-link-hover: #003A5D;

  /* Typography */
  --font-family-brand: "Benton Sans", "Work Sans", "Trebuchet MS", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

/*

<weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name

.work-sans-<uniquifier> {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*/

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 6px 24px rgba(0, 0, 0, 0.12);

  /* Layout */
  --page-max-width: 1140px;
  --page-gutter-x: 24px;
  --page-gutter-y: 24px;
}