/*
 * Solace Brand CSS Variables.
 * Source: assets/branding/BrandedCSS/index.css and Solace Brand Book 2025 v3.0.
 * Dashboard dark-mode role values are derived for this demo surface.
 */
:root {
  /* Canonical Solace brand tokens */
  --brand-classic-green: #00C895;
  --brand-bright-green: #ABFF88;
  --brand-deep-blue: #093B5F;
  --brand-dark-blue: #03213B;
  --brand-white: #FFFFFF;
  --brand-spring-green: #C7FFCB;
  --brand-sky-blue: #C2F7FF;
  --brand-sunrise-yellow: #FFF7C2;
  --brand-dark-green: #009193;
  --brand-orange: #FCA829;
  --brand-gray-1: #F4F4F4;
  --brand-gray-2: #EAEAEA;
  --brand-gray-3: #D6D6D6;

  --gradient-bright-classic: linear-gradient(to right, #ABFF88, #00C895);
  --gradient-dark-deep: linear-gradient(to right, #009193, #093B5F);
  --gradient-deep-dark: linear-gradient(to right, #093B5F, #03213B);

  /* Derived dashboard roles */
  --solace-bg: var(--brand-dark-blue);
  --solace-bg-card: #062B49;
  --solace-bg-raised: #083556;
  --solace-text: var(--brand-white);
  --solace-text-muted: #A9C4D7;
  --solace-border: #1A5477;
  --solace-accent: var(--brand-classic-green);
  --solace-attention: var(--brand-orange);

  /* Backward-compatible aliases for existing components. */
  --solace-green: var(--brand-classic-green);
  --solace-green-dark: var(--brand-dark-green);
  --solace-green-light: var(--brand-bright-green);
  --solace-teal: var(--brand-deep-blue);
  --solace-blue: var(--brand-deep-blue);
  --solace-sky: var(--brand-sky-blue);
  --solace-yellow: var(--brand-sunrise-yellow);
  --solace-orange: var(--brand-orange);
  --solace-white: var(--brand-white);

  /* Deprecated: keep only for legacy failure/error UI, prefer --solace-attention. */
  --solace-red: var(--brand-orange);
}

.bg-classic-green { background-color: var(--brand-classic-green) !important; }
.bg-bright-green { background-color: var(--brand-bright-green) !important; }
.bg-deep-blue { background-color: var(--brand-deep-blue) !important; }
.bg-dark-blue { background-color: var(--brand-dark-blue) !important; }
.bg-spring-green { background-color: var(--brand-spring-green) !important; }
.bg-sky-blue { background-color: var(--brand-sky-blue) !important; }
.bg-dark-green { background-color: var(--brand-dark-green) !important; }
.bg-orange { background-color: var(--brand-orange) !important; }

.text-classic-green { color: var(--brand-classic-green) !important; }
.text-bright-green { color: var(--brand-bright-green) !important; }
.text-deep-blue { color: var(--brand-deep-blue) !important; }
.text-dark-blue { color: var(--brand-dark-blue) !important; }
.text-sky-blue { color: var(--brand-sky-blue) !important; }
.text-orange { color: var(--brand-orange) !important; }

.border-classic-green { border-color: var(--brand-classic-green) !important; }
.border-deep-blue { border-color: var(--brand-deep-blue) !important; }
.border-orange { border-color: var(--brand-orange) !important; }

.bg-gradient-bright-classic { background: var(--gradient-bright-classic) !important; }
.bg-gradient-dark-deep { background: var(--gradient-dark-deep) !important; }
.bg-gradient-deep-dark { background: var(--gradient-deep-dark) !important; }