/* WAI-Core: src/app/static/css/brand.css v2 */

:root {

  /* Brand Colors */
  --brand-color-primary: #2ed9e7;
  --brand-color-background: #111d26;
  --brand-color-container-background: #404040;
  --brand-color-container-foreground-dark: rgba(0, 0, 0, 0.618);
  --brand-color-container-foreground-light: rgba(255, 255, 255, 0.618);
  --brand-color-highlight: rgba(255, 255, 255, 0.38196);
  --brand-color-header: #243f53;
  --brand-color-cta: #186009;
  --brand-color-cta-hover: #1e7b0d;
  --brand-color-lead-the-wai: #620000;
  --brand-color-pathwai: #000062;
  --brand-color-pai-it-forward: #006200;
  --brand-color-modal: #111;

  /* Borders */
  --brand-border-radius: 12px;
  --brand-border-width: 2px;
  --brand-border-color: #2ed9e7;

  /* Typography */
  --brand-font-title: 'Roboto Mono', monospace;
  --brand-font-body: 'Roboto', sans-serif;

  /* Shadows */
  --brand-drop-shadow:
    0px 6px 20px rgba(0, 0, 0, 0.3),
    0px 4px 12px rgba(17, 29, 38, 0.4),
    inset 0px 2px 0px rgba(255, 255, 255, 0.15);

  --brand-drop-shadow-2:
    inset 0px 3.71px 12.37px rgba(0, 0, 0, 0.3),
    inset 0px 2.47px 7.42px rgba(17, 29, 38, 0.4),
    inset 0px -1.24px 0px rgba(255, 255, 255, 0.15);
}

/* Component-Specific Styling */
.brand-primary-text {
  color: var(--brand-color-primary);
}

.brand-primary-border {
  border: 2px solid var(--brand-color-primary);
  border-radius: var(--brand-border-radius);
}

.cta-button {
  background-color: var(--brand-color-cta);
  border-radius: 5px;
  color: #fff;
}

.brand-container-background {
  background-color: var(--brand-color-container-background);
  border-radius: var(--brand-border-radius);
}

.container-foreground-light {
  background-color: var(--brand-color-container-foreground-light);
}

.container-foreground-dark {
  background-color: var(--brand-color-container-foreground-dark);
}

.brand-model-background {
  background-color: var(--brand-model-container);
}

.brand-drop-shadow {
  box-shadow: var(--brand-drop-shadow);
}

.brand-drop-shadow-2 {
  box-shadow: var(--brand-drop-shadow-2);
}

.brand-border {
  border: var(--brand-border-width) solid var(--brand-border-color);
  border-radius: 2px;
}