:root {
  --bg-primary: #F7F7F5;
  --bg-secondary: #F1F1ED;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F6F4ED;
  --bg-input: #FFFFFF;
  --accent: #8A671C;
  --accent-hover: #705214;
  --accent-dim: #5E4512;
  /* The release palette (violet + green) that the gradients are built from. A white-label brand
     colour overwrites all three accents (js/branding.js), so gradients fall back to that colour. */
  --accent-2: #B28A25;
  --accent-3: #237A49;
  --grad-accent: linear-gradient(var(--accent), var(--accent));
  --grad-bar: linear-gradient(var(--accent), var(--accent));
  --text-primary: #20211E;
  --text-secondary: #5D625B;
  --text-muted: #71766D;
  --success: #237A49;
  --success-dim: #15803d;
  --danger: #B63737;
  --danger-dim: #991b1b;
  --warning: #9A6415;
  --warning-dim: #92400e;
  --border: #DEDfd8;
  --border-light: #C8CBC2;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 4px 24px rgba(32, 33, 30, 0.08);
  --shadow-sm: 0 2px 8px rgba(32, 33, 30, 0.05);
  --sidebar-width: 220px;
  --transition: 0.2s ease;
  /* Aliases for names some views use (drop indicators, the slide editor) that were never defined, so
     their outlines and fields fell back to nothing. They follow the brand tokens above. */
  --primary: var(--accent);
  --surface: var(--bg-input);
  --text: var(--text-primary);
  --radius-md: var(--radius);
}