// TODO add a `when (@id7-gen = 2024)` guard to slim down new brand CSS

.apply-site-imagery(
  @basedir,
  @masthead-image: "masthead-image.jpg",
  @border-image-left: "border-image-left.jpg",
  @border-image-right: "border-image-right.jpg") {

  .apply-left-border-image("@{basedir}/@{border-image-left}");
  .apply-right-border-image("@{basedir}/@{border-image-right}");
}

.apply-left-border-image(@url) {
  @media (min-width: @grid-float-breakpoint) {
    .id7-left-border {
      background-image: url(@url);
    }
  }
}

.apply-right-border-image(@url) {
  @media (min-width: @grid-float-breakpoint) {
    .id7-right-border {
      background-image: url(@url);
    }
  }
}

// Generates a set of valid colours for a given brand colour.
// Colours are grouped into pairs for use in different contexts.
// Colours of a pair should pass AA contrast.
// Pure LESS Function - doesn't generate any CSS.
.calculate-brand-colours(@colour) {
  @primary: @colour;
  @primary-contrast: #wcag.contrast(@primary, white, @text-color)[@result];

  // "private" values
  @_base-secondary: tint(@colour, 30%);
  @_secondary-result: #wcag.ultra-contrast(@_base-secondary, white, @text-color);

  // ultra-contrast may end up darkening or lightening the background to achieve AA
  @secondary-calc-msg: @_secondary-result[@msg];
  @secondary: @_secondary-result[@bg];
  @secondary-contrast: @_secondary-result[@fg];
  // Used for some minor link hover states
  @secondary-accent: #wcag.contrast(@secondary-contrast,
    multiply(@secondary, darken(white, 20%)),
    tint(@secondary, 30%)
  )[@result];

  // A colour we can place on white. For links and headings
  @white-emphasis: #wcag.contrast-fallback(white, @primary, @text-color)[@result];

  // A deeper colour we can place on white. May be the same as @white-emphasis if they are both black
  @white-deep-emphasis: #wcag.contrast-fallback(white, darken(@primary, 20%), @text-color)[@result];

  // Links/headings on a pale tint of brand colour
  @pale: tint(@colour, 85%);
  @pale-emphasis: #wcag.contrast-fallback(@pale, @primary, @text-color)[@result];

  // Links/headings on pale grey
  @pale-grey: @gray-lighter;
  @pale-grey-emphasis: #wcag.contrast-fallback(@pale-grey, @primary, @text-color)[@result];

}

// Generates reference tokens for all the colours derived from a brand colour.
.generate-tint-variables(@name, @clazz, @colour) {
  // Set of tints of the primary colour.
  // Copying Bootstrap 5's 100-900 system.
  // Some are commented out to reduce the number of generated colours, but we can add them back if we need them.
  @scale-values:
          100 80%, // lightest
          //200 60%,
          300 40%,
          //400 20%,
          500 0%,  // 500 is always the base colour
          //600 20%,
          700 40%,
          //800 60%,
          900 80%; // darkest

  each(@scale-values, {
    @step: extract(@value, 1);
    @percent: extract(@value, 2);

    @mix-color: if(@step < 500, #ffffff, if(@step > 500, #000000, @colour));
    @final-color: if(@step = 500, @colour, mix(@mix-color, @colour, @percent));

    --w-@{clazz}-colors-@{name}-@{step}: @final-color;
    --w-@{clazz}-colors-@{name}-@{step}-contrast: #wcag.contrast(@final-color, white, @text-color)[];
  });
}

// Define the CSS variables for a brand colour.
// This can't be called from the top level like apply-brand,
// because it isn't valid CSS. In those cases you can call
// this inside :root or inside a class, depending on when
// you want them to apply.
//
// This should only be used if @colour is not one of the brand
// palette colours. If it is, you should mix in .id7-brand-COLOURNAME
// to get the correct aliases (or just add that class to your HTML document).
.brand-css-variables(@colour) {
  @colours: .calculate-brand-colours(@colour);

  //// Colour pairings

  .generate-tint-variables(primary, sys, @colour);

  // Secondary colour background
  --w-sys-colors-primary: var(--w-sys-colors-primary-500);
  --w-sys-colors-secondary: @colours[@secondary];
  --w-sys-colors-secondary-contrast: @colours[@secondary-contrast];
  --w-sys-colors-secondary-accent: @colours[@secondary-accent];

  --w-sys-colors-alt-bg: var(--w-sys-colors-300);
  --w-sys-colors-alt-fg: var(--w-sys-colors-300-contrast);

  // A colour we can place on white - can fall back to black
  --w-sys-colors-white-accent: @colours[@white-emphasis];
  // Slightly deeper colour (or black again)
  --w-sys-colors-white-deepAccent: @colours[@white-deep-emphasis];

  // This grey doesn't depend on the brand colour
  // but the emphasis colour does - may as well keep
  // them together.
  --w-sys-colors-paleGrey: @colours[@pale-grey];
  --w-sys-colors-paleGrey-accent: @colours[@pale-grey-emphasis];
}

// Adds crest as a background image of an element.
// You will need to position it in an appropriate corner
// and possibly add padding to avoid overdraw.
.crest-bg(@defaultStyle) {
  background-repeat: no-repeat;
  background-size: auto var(--w-sys-crestHeight);
}

.crest-bg(positive) {
  background-image: var(--w-ref-images-crestPositive);
  .id7-dark-background & {
    background-image: var(--w-ref-images-crestNegative);
  }
}

.crest-bg(negative) {
  background-image: var(--w-ref-images-crestNegative);
  .id7-light-background & {
    background-image: var(--w-ref-images-crestPositive);
  }
}