@import (reference) "../mixins/branding";
@import (reference) "../variables";

:root {
  --w-ref-colors-blackText: @text-color;
  --w-ref-colors-blackBg: black; // actual black

  /* Reference tokens (don't use directly) */
  --w-ref-colors-page-light: white;
  --w-ref-colors-page-light-contrast: var(--w-ref-colors-blackText);
  --w-ref-colors-page-dark: var(--w-ref-colors-blackBg);
  --w-ref-colors-page-dark-contrast: white;

  // System tokens
  /* Page colour and default text colour */
  --w-sys-colors-page: var(--w-ref-colors-page-light);
  --w-sys-colors-page-contrast: var(--w-ref-colors-page-light-contrast);

  /* Current background and contrasting text colour */
  --w-sys-colors-bg: var(--w-sys-colors-page);
  --w-sys-colors-fg: var(--w-sys-colors-page-contrast);
  // These values currently only work for the new brand where we don't use colours
  // for headings or links.
  --w-sys-colors-heading: var(--w-sys-colors-fg);
  --w-sys-colors-link: var(--w-sys-colors-fg);

  --w-sys-colors-masthead: white;
}

.bg-black {
  --w-sys-colors-bg: var(--w-ref-colors-page-dark);
  --w-sys-colors-fg: var(--w-ref-colors-page-dark-contrast);
}

// This can be enabled to generate a set of
// CSS classes for switching to a different preset
// colour scheme.
// At the time of writing the set of colours
// is not finalised and also nothing is themed
// using CSS variables so they wouldn't have
// any effect on built-in components.
& when (@id7-generate-colour-classes) {
  :root {
    /*
      Definitions for brand colour palette and tints.
      Don't use these reference values directly - use the --w-sys-colors-primary-*
      aliases instead and choose the colour for that area with the `id7-brand-COLORNAME` classes.
     */
    each(@id7-brand-colors, {
      @brand-color-var: "id7-brand-@{value}";
      @brand-color: @@brand-color-var;
      .colour-css-variables(@value, ref, @brand-color);
    });
  }
  // Generate CSS classes that alias sys-colors-primary to a given colour.
  each(@id7-brand-colors, {
    .colour-sys-aliases(@value);
  });
}