:root {
  /* Font */
  --font-body: 'Inter', sans-serif;

  /* Webtica-inspired colors */
  --color-primary: #2A9D8F;
  --color-success: #2A9D8F;      /* repurpose or refine as needed */
  --color-warning: #E9C46A;
  --color-danger: #E76F51;

  --color-text-high-emphasis: #264653;
  --color-text-medium-emphasis: #264653;
  --color-text-low-emphasis: #F4F1DE;

  --color-text-on-primary: #F4F1DE;
  --color-text-on-success: #F4F1DE;
  --color-text-on-warning: #264653;
  --color-text-on-danger: #F4F1DE;

  --color-border-high-emphasis: #264653;
  --color-border-medium-emphasis: #2A9D8F;
  --color-border-low-emphasis: #F4F1DE;

  --color-backdrop: rgba(38, 70, 83, 0.5);
  --color-overlay: rgba(244, 241, 222, 0.8);

  /* Surfaces */
  --color-surface-1: #F4F1DE;
  --color-surface-2: #E9C46A;
  --color-surface-3: #E76F51;

  /* Radius and branding elements remain unchanged */
  --border-radius: 0.5rem;
  --border-radius-avatar: 4rem;
  --border-radius-circle: 100%;
  ...
}

.theme--dark {
  --color-primary: #2A9D8F;
  --color-success: #2A9D8F;
  --color-warning: #E9C46A;
  --color-danger: #E76F51;

  --color-text-high-emphasis: #F4F1DE;
  --color-text-medium-emphasis: #264653;
  --color-text-low-emphasis: #2A9D8F;

  --color-text-on-primary: #264653;
  --color-text-on-success: #264653;
  --color-text-on-warning: #264653;
  --color-text-on-danger: #264653;

  --color-border-high-emphasis: #2A9D8F;
  --color-border-medium-emphasis: #264653;
  --color-border-low-emphasis: #E76F51;

  --color-surface-1: #264653;
  --color-surface-2: #2A9D8F;
  --color-surface-3: #264653;
  --color-overlay: rgba(0, 0, 0, 0.8);
}