:root {
  /* Base palette */
  --cas-color-orange-600: #E86524; /* Casambi Orange (primary brand) */
  --cas-color-orange-500: #E58C24; /* UI highlight */
  --cas-color-black: #000000;
  --cas-color-white: #FFFFFF;
  --cas-color-gray-500: #808080;
  --cas-color-gray-300: #d3d3d3;
  --cas-color-gray-100: #f5f5f5;

  /* Semantic */
  --cas-brand-primary: var(--cas-color-orange-600);
  --cas-brand-accent: var(--cas-color-orange-500);
  --cas-text-default: var(--cas-color-black);
  --cas-text-inverse: var(--cas-color-white);
  --cas-text-muted: var(--cas-color-gray-500);
  --cas-bg-surface: var(--cas-color-white);
  --cas-bg-inverse: var(--cas-color-black);
  --cas-bg-panel: var(--cas-color-gray-100);

  --cas-navbar-bg: var(--cas-color-black);
  --cas-navbar-title: var(--cas-color-white);

  --cas-button-primary-bg: var(--cas-brand-accent);
  --cas-button-primary-text: var(--cas-color-black);
  --cas-button-secondary-bg: var(--cas-color-black);
  --cas-button-secondary-text: var(--cas-color-white);
  --cas-button-danger-bg: #d32f2f;
  --cas-button-danger-text: var(--cas-color-white);

  --cas-badge-info-bg: var(--cas-color-gray-500);

  /* Logo constraints (for validator helpers) */
  --cas-logo-min-height-screen: 13px;
  --cas-logo-min-height-print: 3mm;
  --cas-logo-safety-margin: 1em;

  /* Typography */
  --cas-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --cas-font-size: 16px;
  --cas-line-height: 1.5;
  --cas-font-weight-regular: 400;
  --cas-font-weight-medium: 500;
  --cas-font-weight-semibold: 600;

  /* Space */
  --cas-space-0: 0;
  --cas-space-1: 4px;
  --cas-space-2: 8px;
  --cas-space-3: 12px;
  --cas-space-4: 16px;
  --cas-space-6: 24px;
  --cas-space-8: 32px;

  /* Elevation */
  --cas-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12);
  --cas-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.16);

  /* Radius & border */
  --cas-radius-sm: 6px;
  --cas-radius-md: 10px;
  --cas-radius-lg: 14px;
  --cas-border-width: 1px;
  --cas-border-color: var(--cas-color-gray-300);

  /* Icon tinting */
  --cas-icon-base: var(--cas-color-black);
  --cas-icon-tint-accent: var(--cas-brand-accent);
}

/* Dark theme */
:root[data-theme="dark"] {
  --cas-text-default: var(--cas-color-white);
  --cas-text-inverse: var(--cas-color-black);
  --cas-text-muted: #B3B3B3;

  --cas-bg-surface: #111111;        /* near-black surface */
  --cas-bg-inverse: var(--cas-color-white);
  --cas-bg-panel: #1a1a1a;

  --cas-navbar-bg: #000000;
  --cas-navbar-title: var(--cas-color-white);

  --cas-button-primary-bg: var(--cas-brand-accent);
  --cas-button-primary-text: var(--cas-color-black); /* black text on accent remains readable */
  --cas-button-secondary-bg: var(--cas-color-white);
  --cas-button-secondary-text: var(--cas-color-black);

  --cas-badge-info-bg: #666666;

  --cas-elevation-1: 0 1px 2px rgba(255, 255, 255, 0.10);
  --cas-elevation-2: 0 2px 6px rgba(255, 255, 255, 0.12);

  --cas-icon-base: var(--cas-color-white);
}

/* Example component tokens → styles */
.cas-navbar {
  background: var(--cas-navbar-bg);
  color: var(--cas-navbar-title);
  font-family: var(--cas-font-family);
  box-shadow: var(--cas-elevation-1);
}

.cas-btn-primary {
  background: var(--cas-button-primary-bg);
  color: var(--cas-button-primary-text);
  border: var(--cas-border-width) solid transparent;
  border-radius: var(--cas-radius-md);
  padding: var(--cas-space-2) var(--cas-space-4);
  font-weight: var(--cas-font-weight-medium);
}

.cas-btn-secondary {
  background: var(--cas-button-secondary-bg);
  color: var(--cas-button-secondary-text);
  border: var(--cas-border-width) solid var(--cas-button-secondary-text);
  border-radius: var(--cas-radius-md);
  padding: var(--cas-space-2) var(--cas-space-4);
  font-weight: var(--cas-font-weight-medium);
}

.cas-badge-info {
  display: inline-block;
  background: var(--cas-badge-info-bg);
  color: var(--cas-text-inverse);
  border-radius: var(--cas-radius-sm);
  padding: 0 var(--cas-space-2);
  font-size: 12px;
  line-height: 20px;
}