:root {
  /* Primary palette — from Comply.Land poster/brand */
  --teal: #1a4a4a;             /* dark teal - buttons, links, accents */
  --teal-dark: #0a7a70;        /* teal hover */
  --dark-teal: #1a4a4a;        /* dark teal - large content blocks */
  --orange: #e8943a;           /* warm orange - CTA highlights, badges */
  --orange-dark: #d07a28;      /* orange hover */
  --warm-grey: #78716c;        /* warm grey - card grids, softer blocks */
  --charcoal: #2d2d2d;         /* charcoal - dark sections, footer */

  /* Mapped to wireframe variable names for compatibility */
  --black: #2d2d2d;
  --dark: #2d2d2d;
  --mid: #78716c;
  --grey: #a8a29e;
  --light: #d6d3d1;
  --pale: #f5f3f0;
  --white: #ffffff;
  --border: #e7e5e4;

  /* Accent colors */
  --accent: #e8943a;
  --accent-hover: #d07a28;
  --accent-secondary: #0d9488;

  /* Text */
  --text-primary: #1a4a4a;     /* dark teal for headings */
  --text-body: #1c1917;        /* warm dark for body text */
  --text-light: #ffffff;
  --text-muted: #78716c;

  /* Legacy mappings */
  --cello: #1a4a4a;
  --purple-500: #0d9488;
  --teal-500: #0d9488;
  --gold-400: #e8943a;
}