@import (reference) "../bootstrap/less/variables.less";

// Version switches for different generations of the brand,
// so we can continue to build older versions of the site (particularly
// non-branded sites that were based on an older version).
// One overall version for the whole site, and individual ones for
// different areas that could be overriden individually.
@id7-gen: 2025;
// @id7-gen should not be referenced anywhere other than for these defaults!
@id7-gen-font: @id7-gen;
@id7-gen-font-sizes: @id7-gen;
@id7-gen-buttons: @id7-gen;
@id7-gen-colours: @id7-gen;
@id7-gen-layout: @id7-gen;
@id7-gen-logos: @id7-gen;

@grid-gutter-width:         20px;

@container-tablet:          (730px + @grid-gutter-width);
@container-desktop:         (950px + @grid-gutter-width);
@container-large-desktop:   (1150px + @grid-gutter-width);

///
// https://warwick.ac.uk/about/brand/brand-guidelines/colours/
///

// Primary brand colour - Aubergine
@id7-brand-purple: #440379;

// "Text and background colours"
@id7-brand-black: #000000; // inspired
@id7-brand-gray: #58595B;
@id7-brand-white: #FFFFFF; // wow

// Secondary palette (bright)
@id7-brand-gold-bright: #F1BE48;
@id7-brand-orange-bright: #E87722;
@id7-brand-red-bright: #CB333B;
@id7-brand-blue-bright: #00A9CE;
@id7-brand-teal-bright: #6DCDB8;

// Tertiary palette (dark)
@id7-brand-gold: #D69A2D;
@id7-brand-orange: #BE531C;
@id7-brand-red: #9D2235;
@id7-brand-blue: #41748D;
@id7-brand-teal: #507F70;

// 2025 sherbert flavours
@id7-brand-coral: #F1977F;
@id7-brand-lavender: #A499F4;
@id7-brand-paleblue: #6CB7FF;
@id7-brand-yellow: #FEDE7B;
@id7-brand-green: #51D7C1;

// A fixed set of colours for which we'll generate some CSS variables
// wrapped in classes. These names reference id7-brand-* variables above
@id7-brand-colors: purple, coral, lavender, paleblue, yellow, green;
@id7-generate-colour-classes: true;

// Green briefly wasn't a colour in the official palette, but now there is one
// (though it's basically turquoise). Keeping the old "Bright Green" definition
// though aliased to the new one for maximum confusion
@id7-brand-green-bright: @id7-brand-green;


@id7-brand-default: @id7-brand-purple;

@id7-subtle-line-colour: #ababab;

@id7-account-popover-width: 320px;
@id7-mw-popover-width: 390px; // Need to account for scrollbars w/ Chrome
@id7-mw-popover-height: 1200px; // increased from 640px
@id7-account-popover-actions-bg: #f7f7f7;
@id7-account-popover-actions-border: #ebebeb;

@id7-masthead-logo-height-xxs: if(@id7-gen-logos = 2024, @id7-masthead-logo-height-xs, 35px);
@id7-masthead-logo-height-xs: if(@id7-gen-logos = 2024, 54px, 40px);
@id7-masthead-logo-height-sm: if(@id7-gen-logos = 2024, 75px, 40px);
@id7-masthead-logo-aspect: if(@id7-gen-logos = 2024, (226/150), (300/80)); // image intrinsic dimensions

@id7-masthead-search-offset-xs: 7px;
@id7-masthead-search-offset-sm: 32px;
@id7-masthead-search-button-width: 26px;

@id7-header-height-lg: 375px;
@id7-header-ratio: (@container-lg / @id7-header-height-lg); // 3.12

@id7-header-height-md: (round(@container-md / @id7-header-ratio)); // ~311
@id7-header-height-sm: (round(@container-sm / @id7-header-ratio)); // ~240
@id7-header-height-xs: 200px;

@id7-header-h1-font-size-sm: 30px;
@id7-header-h1-font-size-xs: 20px;

@id7-header-h1-height: (1.875 * @main-font-size);
@id7-header-h1-padding-vertical: 0.8rem;
@id7-affixed-header-height: (@id7-header-h1-height + (@id7-header-h1-padding-vertical * 2));

@id7-navigation-height: 35px;
@id7-navigation-tertiary-background-colour: #f8f8f8;

@id7-border-image-width: 375px;
@id7-border-image-height: 1200px;

@id7-site-footer-colour: #d3d3d3;

@id7-print-logo-width: 122px;

@id7-image-root-dir: "../images";
@id7-image-crest-positive: url("@{id7-image-root-dir}/crest-positive.svg");
@id7-image-crest-negative: url("@{id7-image-root-dir}/crest-negative.svg");
@id7-image-wordmark: "@{id7-image-root-dir}/wordmark.svg";

// Bootstrap and FA variable overrides
@icon-font-path: '../fonts';
// FA path, used in the font-awesome LESS files
@int-fa-font-path: '../fonts';
@body-bg: transparent;
@text-color: if((@id7-gen-colours = 2024), #202020, #212529);
@font-stack-lato: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

@font-stack-nhg-fallbacks: Aptos, 'Helvetica Neue', Helvetica, 'SF Pro', 'Liberation Sans', sans-serif;

// Best for headings
@font-stack-nhg-display: neue-haas-grotesk-display, @font-stack-nhg-fallbacks;
// Best for other text
@font-stack-nhg-text: neue-haas-grotesk-text, @font-stack-nhg-fallbacks;

@font-family-sans-serif: if((@id7-gen-font = 2024),
  @font-stack-lato,
  @font-stack-nhg-text
);

@line-height-base: 1.6;

@main-font-size: 1.6rem;
@nav-font-size: 1.4rem;
@main-font-weight: 400;

@blockquote-font-size: inherit;

@headings-font-weight: if((@id7-gen-font = 2024), 400, 600);
@headings-font-family: if((@id7-gen-font = 2024),
  inherit,
  @font-stack-nhg-display
);

@nav-link-padding: 10px;

@navbar-height: @id7-navigation-height;
@navbar-margin-bottom: 0;

@navbar-padding-horizontal: 0;
@navbar-border-radius: 0;

@nav-tabs-link-color: #333;
@nav-tabs-link-bg: #ddd;
@nav-tabs-link-hover-bg: #ebebeb;
@nav-tabs-link-hover-border-color: @nav-tabs-active-link-hover-border-color;

@nav-tabs-active-bg: white;
@nav-tabs-active-link-hover-bg: @nav-tabs-active-bg;
@nav-tabs-active-link-hover-color: #333;
@nav-tabs-active-link-hover-border-color: #bbb;

@nav-tabs-justified-active-link-border-color: @nav-tabs-active-bg;

@popover-padding-vertical: (@main-font-size - 1px); // 16px
@popover-padding-horizontal: (@grid-gutter-width - 1px); // 19px

@input-color: #222222;

// see @id7-header-h1-font-size for site title size.
@font-size-h1: if((@id7-gen-font-sizes = 2024), 2.8rem, 4rem);
@font-size-h2: 2.6rem;
@font-size-h3: 2.4rem;
@font-size-h4: 2.2rem;
@font-size-h5: 2rem;
@font-size-h6: @main-font-size;
@id7-h6-font-weight: bold;

// Overriding of bootstrap defaults to stop calculation misery now that font sizes are based on rem

@font-size-base: if(@id7-gen-font-sizes = 2024, 1.4rem, 1.6rem);
@font-size-large: 1.8rem;
@font-size-small: 1.2rem;

@font-size-search: 1.4rem;

//Use these instead of the above font sizes for calculations that should produce results in px
@font-size-base-px: if(@id7-gen-font-sizes = 2024, 14px, 16px);
@font-size-large-px: 18px;
@font-size-small-px: 12px;

//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: (@font-size-base-px * @line-height-base); // ~20px

@input-height-base: if(@id7-gen-buttons = 2024, 3.6rem, 4rem);
//** Large `.form-control` height
@input-height-large: 4.6rem;
//** Small `.form-control` height
@input-height-small: 3rem;

@jumbotron-font-size: 2.1rem;
@jumbotron-heading-font-size: 2.6rem;

// End of font-size-based bootstrap overrides

@font-scale-xs: if(@id7-gen-font-sizes = 2024, 0.875, 1);

@border-radius-base: 0px;
@border-radius-large: 0px;
@border-radius-small: 0px;

@button-border-radius-base: if(@id7-gen-buttons = 2024, 4px, 0);
@button-border-radius-large: if(@id7-gen-buttons = 2024, 6px, 0);
@button-border-radius-small: if(@id7-gen-buttons = 2024, 3px, 0);

@grid-float-breakpoint-max: 0px; // Don't collapse nav

@btn-default-bg: #f4f4f4;

@btn-danger-bg: #af2723;
@btn-danger-color: #fff;

@label-default-bg: #f4f4f4;
@label-default-text: @btn-default-color;
@label-default-border: @btn-default-border;

@brand-primary: #204f79;
@brand-success: #596e31;
@brand-info: #1d817a;
@brand-warning: @id7-brand-orange;
@brand-danger: #af2723;

@state-success-text: darken(@brand-success, 10%);
@state-success-bg: lighten(@brand-success, 55%);
@state-info-text: darken(@brand-info, 10%);
@state-info-bg: lighten(@brand-info, 55%);
@state-warning-text: #AC4E2E;
@state-warning-bg: lighten(@id7-brand-orange, 50%);
@state-danger-text: darken(@brand-danger, 10%);
@state-danger-bg: lighten(@brand-danger, 40%);

@alert-success-bg: lighten(@brand-success, 55%);
@alert-success-text: @text-color;
@alert-success-border: darken(spin(@alert-success-bg, -10), 5%);

@alert-info-bg: lighten(@brand-info, 55%);
@alert-info-text: @text-color;
@alert-info-border: darken(spin(@alert-info-bg, -10), 5%);

@alert-warning-bg: lighten(@id7-brand-orange, 50%);
@alert-warning-text: @text-color;
@alert-warning-border: darken(spin(@alert-warning-bg, -10), 5%);

@alert-danger-bg: #af2723;
@alert-danger-text: white;
@alert-danger-border: @alert-danger-bg;

@id7-ignore-id6-legacy: false;

@focus-outline: #ffbf47;

// Contrast fixes ID-347

@text-muted: #6c757d;
@blockquote-small-color: @text-muted;
@nav-disabled-link-color: @text-muted;
@pager-disabled-color: @text-muted;
@badge-bg: @text-muted;
@breadcrumb-active-color: darken(@text-muted, 10%);
@panel-warning-text: darken(@brand-warning, 10%);

// Wide viewport support
@support-xl-viewport:       false;
@support-2xl-viewport:      false;

@container-xl-desktop:      (1550px + @grid-gutter-width);
@container-xl:              @container-xl-desktop;
@container-2xl-desktop:     (1850px + @grid-gutter-width);
@container-2xl:             @container-2xl-desktop;

@screen-xl:                 1600px;
@screen-xl-min:             @screen-xl;
@screen-xl-desktop:         @screen-xl-min;
@screen-2xl:                1900px;
@screen-2xl-min:            @screen-2xl;
@screen-2xl-desktop:        @screen-2xl-min;

@screen-lg-max:             (@screen-xl-min - 1);
@screen-xl-max:             (@screen-2xl-min - 1);

@borderless-container:      false;