:root {
  --brand-primary: #2e1352;
  --brand-secondary: #6c6ebc;
  --brand-tertiary: #2699fb;

  --brand-primary-accent-100: #ede2fc;
  --brand-primary-accent-200: #c4b3dc;
  --brand-primary-accent-500: #2e1352;
  --brand-tertiary-accent-500: #2699f8;

  --accent-4-600: #464646;

  --neutral-dark: #000000;
  --neutral-light: #ffffff;
  --neutral-transparent: transparent;
  --neutral-overlay-light: rgba(255, 255, 255, 0.75);
  --neutral-overlay-dark: rgba(0, 0, 0, 0.75);
  --neutral-grey-50: #ffffff;
  --neutral-grey-100: #e2e7ed;
  --neutral-grey-200: #dedede;
  --neutral-grey-300: #ffffff;
  --neutral-grey-400: #ffffff;
  --neutral-grey-500: #666666;
  --neutral-grey-600: #ffffff;
  --neutral-grey-700: #ffffff;
  --neutral-grey-800: #ffffff;
  --neutral-grey-900: #535353;
  --neutral-grey-950: #ffffff;
  --feedback-neutral: #888888;
  --feedback-neutral-light: #d1d1d1;
  --feedback-neutral-dark: #262626;
  --feedback-success: #27743d;
  --feedback-success-light: #b2ffd6;
  --feedback-success-dark: #0a5d35;
  --feedback-warning: #e47c00;
  --feedback-warning-light: #ffec84;
  --feedback-warning-dark: #7e3509;
  --feedback-danger: #c90000;
  --feedback-danger-light: #ffdddd;
  --feedback-danger-dark: #500000;

  /* Contrast colours */
  --dark: var(--neutral-dark);
  --light: var(--neutral-light);
  /* Errors / Success generic names */
  --negative: var(--feedback-danger);
  --positive: var(--feedback-success);

  /* Fonts */
  --font-primary: var(--font-helvetica);
  --font-secondary: var(--font-helvetica);
  --font-tertiary: var(--font-helvetica);
}

html[data-theme="dseiuk"] {
  /* TEXT transform variables */
  --text-transform: none;
  /* TODO: old color - no in Figma yet */
  --accent-2: #fa5f1f;

  /* Screen color */
  --color-surface-screen: var(--neutral-light);
  /* Surface colour */
  --color-surface-neutral: var(--neutral-grey-100);
  --color-surface-neutral-light: var(--neutral-light);
  --color-surface-brand-primary: var(--brand-secondary);
  --color-surface-brand-secondary: var(--accent-2);

  /* Button */
  --color-button-surface: var(--neutral-transparent);
  --color-button-surface-hover: var(--brand-primary-accent-100);
  --color-button-surface-active: var(--neutral-transparent);
  --color-button-surface-focus: var(--neutral-transparent);
  --color-button-border: var(--brand-primary-accent-500);
  --color-button-border-hover: var(--brand-primary-accent-500);
  --color-button-border-active: var(--brand-primary-accent-500);
  --color-button-border-focus: var(--feedback-success);
  --color-button-content: var(--neutral-dark);
  --color-button-content-hover: var(--neutral-dark);
  --color-button-content-focus: var(--neutral-dark);

  /* Tags */
  --color-tag-surface: var(--neutral-transparent);
  --color-tag-surface-focus: var(--neutral-light);
  --color-tag-surface-hover: var(--brand-primary-accent-500);
  --color-tag-surface-active: var(--brand-primary-accent-500);
  --color-tag-border: var(--brand-primary-accent-500);
  --color-tag-border-focus: var(--feedback-success);
  --color-tag-border-hover: var(--brand-primary-accent-500);
  --color-tag-border-active: var(--brand-primary-accent-500);
  --color-tag-content: var(--neutral-dark);
  --color-tag-content-focus: var(--neutral-dark);
  --color-tag-content-hover: var(--neutral-light);
  --color-tag-content-active: var(--neutral-light);
  --color-tag-promoted-highlight: var(--brand-tertiary-accent-500);
  --color-tag-featured-highlight: var(--feedback-success);
  --color-tag-partners-highlight: var(--accent-4-600);

  /* Forms */
  --color-input-surface: var(--neutral-light);
  --color-input-surface-checked: var(--accent-2);
  --color-input-border: var(--brand-primary-accent-500);
  --color-input-border-focus: var(--neutral-dark);
  --color-input-border-checked: var(--accent-2);
  --color-input-content: var(--neutral-dark);
  --color-input-content-checked: var(--neutral-light);
  --color-input-outline-focus: var(--brand-tertiary);

  /* Tabs */
  --color-tabs-surface: var(--neutral-light);
  --color-tabs-surface-focus: var(--brand-primary-accent-500);
  --color-tabs-surface-hover: var(--brand-primary-accent-500);
  --color-tabs-surface-active: var(--brand-primary-accent-500);

  --color-tabs-border: var(--brand-primary-accent-500);
  --color-tabs-border-hover: var(--brand-primary-accent-500);
  --color-tabs-border-focus: var(--brand-primary-accent-500);
  --color-tabs-border-active: var(--brand-primary-accent-500);

  --color-tabs-content: var(--neutral-dark);
  --color-tabs-content-hover: var(--neutral-light);
  --color-tabs-content-focus: var(--neutral-light);
  --color-tabs-content-active: var(--neutral-light);

  /* Heading */
  --color-content-heading: var(--neutral-dark);
  --color-content-body: var(--neutral-dark);

  /* Text */
  --color-content-primary: var(--neutral-dark);
  --color-content-secondary: var(--accent-4-600);
  --color-content-tertiary: var(--accent-2);
  --color-content-active: var(--brand-primary);

  /* Links */
  --color-link-content: var(--neutral-dark);
  --color-link-content-hover: var(--neutral-dark);
  --color-link-surface-hover: var(--neutral-grey-100);

  /* Navs */
  --color-nav-content: var(--neutral-dark);
  --color-nav-content-hover: var(--neutral-dark);

  /* Header */
  --color-header-surface: var(--neutral-light);
  --color-header-content: var(--neutral-dark);

  /* Borders */
  --color-outline-focus: var(--feedback-success);
  --color-divider: var(--brand-primary-accent-100);
  --color-border-light: var(--brand-primary-accent-200);
  --color-border: var(--brand-primary-accent-500);
  --color-border-dark: var(--brand-primary-accent-500);

  /* Sidebar blocks */
  --color-sidebar-surface: var(--neutral-grey-100);
  --color-sidebar-content: var(--neutral-dark);
  --color-sidebar-border: var(--brand-primary-accent-500);

  /* Cards */
  --color-card-surface: var(--neutral-light);

  /* Quote */
  --color-quote-surface: #ede2fc;

  /* Footer */
  --color-footer-content: var(--neutral-dark);

  /* Class based variable */
  .nav-item-light {
    --color-nav-content: var(--neutral-light);
    --color-nav-content-hover: var(--neutral-light);
  }
  .tags-list {
    --color-tag-surface: var(--neutral-light);
  }

  .fallback-hero-grey {
    --color-hero-surface: #b199d1;
    color: #000;
  }

  .fallback-hero-dark {
    --color-hero-surface: #2e1352;
    color: #fff;
  }

  .card-featured {
    --color-card-surface: var(--neutral-grey-100);
  }
  .card-promo {
    --color-card-surface: var(--brand-tertiary-accent-500);
  }

  /* Tags / Override default variable */
  .tag-promoted {
    --color-tag-surface: var(--brand-tertiary-accent-500);
    --color-tag-border: var(--brand-tertiary-accent-500);
    --color-tag-content: var(--neutral-light);
  }
  .tag-featured {
    --color-tag-surface: var(--feedback-success);
    --color-tag-border: var(--feedback-success);
    --color-tag-content: var(--neutral-light);
  }
  .tag-partner {
    --color-tag-surface: var(--accent-4-600);
    --color-tag-border: var(--accent-4-600);
    --color-tag-content: var(--neutral-light);
  }

  .tab {
    --color-tag-surface-focus: var(--neutral-light);
    --color-tag-content-focus: var(--neutral-dark);
  }

  .filter-tag {
    --color-tag-surface: var(--brand-primary-accent-100);
    --color-tag-border: var(--brand-primary-accent-100);
  }

  .listing-filter {
    --color-input-surface-checked: var(--feedback-success);
    --color-input-border-checked: var(--feedback-success);
    --color-content-active: #7d5ea7;
  }

  .accordion-item {
    --color-button-border: var(--brand-primary-accent-500);
    --color-button-surface-hover: var(--brand-primary-accent-100);
  }

  .author {
    --color-divider: var(--brand-primary-accent-500);
  }
}