:root {
  /* TODO: extend when design is updated */
  --brand-primary: #156f6f;
  --brand-secondary: #6c6ebc;
  --brand-tertiary: #2699f8;
  --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: #156f6f;
  --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);

  /* Tags highlight colors */
  --tag-promoted-highlight: #2699f8;
  --tag-featured-highlight: #639100;
  --tag-partners-highlight: #6c6ebc;

  --accent-2: #1a8989;

  /* Fonts */
  --font-primary: var(--font-lato);
  --font-secondary: var(--font-lora);
  --font-tertiary: var(--font-roboto);
}

html[data-theme="igba"] {
  /* ##### COLOURS ##### */

  /* 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);
  --color-surface-brand-tertiary: var(--brand-tertiary);

  /* Button */
  --color-button-surface: var(--neutral-transparent);
  --color-button-surface-hover: var(--neutral-grey-200);
  --color-button-surface-active: var(--neutral-grey-200);
  --color-button-surface-focus: var(--neutral-light);
  --color-button-border: var(--neutral-dark);
  --color-button-border-hover: var(--neutral-dark);
  --color-button-border-active: var(--neutral-dark);
  --color-button-border-focus: var(--accent-2);
  --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(--neutral-dark);
  --color-tag-surface-active: var(--accent-2);
  --color-tag-border: var(--neutral-dark);
  --color-tag-border-focus: var(--accent-2);
  --color-tag-border-hover: var(--neutral-dark);
  --color-tag-border-active: var(--accent-2);
  --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);

  /* Forms */
  --color-input-surface: var(--neutral-light);
  --color-input-surface-checked: var(--accent-2);
  --color-input-border: var(--neutral-dark);
  --color-input-border-focus: var(--accent-2);
  --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-hover: var(--neutral-dark);
  --color-tabs-surface-active: var(--neutral-dark);
  --color-tabs-content-hover: 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(--neutral-grey-900);
  --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);

  --radius: 2rem;
  /* Borders */
  --color-outline-focus: var(--accent-2);
  --color-divider: var(--neutral-grey-100);

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

  /* Quote */
  --color-quote-surface: var(--neutral-grey-200);

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

  /* 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: var(--neutral-grey-900);
  }

  .card-featured,
  .card-promo {
    /* Integrate color in figma token */
    --color-card-surface: rgba(38, 153, 248, 0.1);
  }

  .tag-boosted {
    /* Integrate color in figma token */
    --color-tag-surface: var(--brand-tertiary);
    --color-tag-content: var(--neutral-light);
    --color-tag-border: var(--brand-tertiary);
  }

  /* Cards promoted / Override the card surface variable*/
  .card-featured,
  .card-promo,
  .card-partner {
    --color-card-surface: var(--tag-promoted-highlight);
  }

  /* Tags / Override default variable */
  .tag-promoted {
    --color-tag-surface: var(--tag-promoted-highlight);
    --color-tag-border: var(--tag-promoted-highlight);
    --color-tag-content: var(--neutral-light);
  }
  .tag-featured {
    --color-tag-surface: var(--tag-featured-highlight);
    --color-tag-border: var(--tag-featured-highlight);
    --color-tag-content: var(--neutral-light);
  }
  .tag-partner {
    --color-tag-surface: var(--tag-partners-highlight);
    --color-tag-border: var(--tag-partners-highlight);
    --color-tag-content: var(--neutral-light);
  }

  /* ##### TYPOGRAPHY ##### */
  /* Letter spacing / .tag values */
  --tag-letter-spacing: 1.35px;
  --tag-letter-spacing-md: 1.8px;
  --tag-weight: 500;
  --nav-content-weight: 900;
  --content-heading-weight: 900;
}