// =============================================================================
// ONS Brand guidelines for Colour: https://www.notion.so/Colours-9cd14589e0764e33a3b3c5a6762f37ae
// Tints: If you are using tints of a colour, use either 70%, 40% or 10%. Tints are created by adding white (30%, 60% or 90%), rather than using transparency.
// =============================================================================

:root {
    // Grey palette
    --ons-color-black: #222;
    --ons-color-grey-100: #414042;
    --ons-color-grey-75: #707071;
    --ons-color-grey-35: #bcbcbd;
    --ons-color-grey-25: #d5d5d6;
    --ons-color-grey-15: #e2e2e3;
    --ons-color-grey-10: #efeff0;
    --ons-color-grey-5: #f5f5f6;
    --ons-color-white: #fff;

    // Primary brand palette
    --ons-color-night-blue: #003c57; // ONS logo primary
    --ons-color-spring-green: #a8bd3a; // ONS logo accent
    --ons-color-ocean-blue: #206095;
    --ons-color-sky-blue: #27a0cc;
    --ons-color-aqua-teal: #00a3a6;
    --ons-color-navy-blue: #194766;
    --ons-color-pale-blue: #e7eff4;
    --ons-color-soft-blue-grey: #dee7ee;
    --ons-color-light-blue-grey: #e9eff4;

    // Supporting palette
    --ons-color-leaf-green: #0f8243;
    --ons-color-ruby-red: #d0021b;
    --ons-color-jaffa-orange: #fa6401;
    --ons-color-sun-yellow: #fbc900;
    --ons-color-neon-yellow: #f0f762;
    --ons-color-light-orange: #e8bb9b;
    --ons-color-gov-teal: #00847d;
    --ons-color-gov-red: #b10e1e;
    --ons-color-gov-black: #0b0c0c;

    // Core colour adjustments - tints
    --ons-color-ocean-blue-tint: #e9eff4;
    --ons-color-ocean-blue-vibrant: #1f8fd8;
    --ons-color-spring-green-tint: #c3c5b8;
    --ons-color-leaf-green-tint: #e7f3ec;
    --ons-color-leaf-green-vibrant: #10ca64;
    --ons-color-leaf-green-dark-10: #073d20;
    --ons-color-leaf-green-dark-5: #0c6b37;
    --ons-color-ruby-red-tint: #fae6e8;
    --ons-color-ruby-red-vibrant: #fd112d;
    --ons-color-jaffa-orange-tint: #fff0e6;
    --ons-color-jaffa-orange-vibrant: #ff7b24;
    --ons-color-sun-yellow-dark: #e2b500;
    --ons-color-navy-blue-light: #153b55;

    // Theme branding
    --ons-color-branded: var(--ons-color-ocean-blue);
    --ons-color-branded-text: var(--ons-color-ocean-blue);
    --ons-color-branded-tint: var(--ons-color-ocean-blue-tint);
    --ons-color-branded-secondary: var(--ons-color-night-blue);
    --ons-color-branded-tertiary: var(--ons-color-aqua-teal);
    --ons-color-branded-supporting: var(--ons-color-spring-green);
    --ons-color-branded-supporting-tint: var(--ons-color-branded-supporting);

    // =============================================================================
    // Assignment
    // =============================================================================

    // Header
    --ons-color-header: var(--ons-color-branded);
    --ons-color-header-neutral: var(--ons-color-grey-75);
    --ons-color-header-masthead: var(--ons-color-white);
    --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
    --ons-color-header-masthead-neutral: var(--ons-color-black);
    --ons-color-header-title: var(--ons-color-text);
    --ons-color-header-navigation-links: var(--ons-color-text);
    --ons-color-service-links: var(--ons-color-white);

    // Banners, page
    --ons-color-cta-bg: var(--ons-color-branded-tint);
    --ons-color-banner-bg: var(--ons-color-grey-5);
    --ons-color-banner-bg-dark: var(--ons-color-grey-15);
    --ons-color-page-light: var(--ons-color-white);
    --ons-color-banner-browser-bg: var(--ons-color-black);
    --ons-color-hero-bg: var(--ons-color-branded-tint);
    --ons-color-hero-bg-dark: var(--ons-color-branded);

    // Typography
    --ons-color-text: var(--ons-color-black);
    --ons-color-text-light: var(--ons-color-grey-75);
    --ons-color-text-inverse: var(--ons-color-white);
    --ons-color-text-banner: var(--ons-color-black);
    --ons-color-text-link: var(--ons-color-ocean-blue);
    --ons-color-text-link-hover: var(--ons-color-night-blue);
    --ons-color-text-link-active: var(--ons-color-night-blue);
    --ons-color-text-link-focus: var(--ons-color-black);
    --ons-color-text-inverse-link: var(--ons-color-white);
    --ons-color-text-inverse-link-hover: var(--ons-color-grey-5);
    --ons-color-text-banner-link: var(--ons-color-grey-100);
    --ons-color-text-banner-link-hover: var(--ons-color-black);
    --ons-color-text-metadata: var(--ons-color-black);

    // Foundations
    --ons-color-focus: var(--ons-color-sun-yellow);
    --ons-color-focus-dark: var(--ons-color-sun-yellow-dark);
    --ons-color-highlight: var(--ons-color-neon-yellow);

    // Borders
    --ons-color-borders: var(--ons-color-grey-75);
    --ons-color-borders-indent: var(--ons-color-grey-35);
    --ons-color-borders-light: var(--ons-color-grey-35);
    --ons-color-borders-document-image: var(--ons-color-grey-15);
    --ons-color-borders-document-image-focus: var(--ons-color-black);

    // Placeholders
    --ons-color-placeholder: var(--ons-color-grey-75);

    // Form elements
    --ons-color-button: var(--ons-color-leaf-green);
    --ons-color-button-secondary: var(--ons-color-grey-15);
    --ons-color-button-shadow: var(--ons-color-leaf-green-dark-10);
    --ons-color-button-hover: var(--ons-color-leaf-green-dark-5);
    --ons-color-button-secondary-shadow: var(--ons-color-grey-75);
    --ons-color-button-secondary-hover: var(--ons-color-grey-25);
    --ons-color-input-border: var(--ons-color-black);
    --ons-color-input-bg: var(--ons-color-white);

    // Panels and status
    --ons-color-info: var(--ons-color-ocean-blue);
    --ons-color-info-tint: var(--ons-color-ocean-blue-tint);
    --ons-color-info-vibrant: var(--ons-color-ocean-blue-vibrant);
    --ons-color-success: var(--ons-color-leaf-green);
    --ons-color-success-tint: var(--ons-color-leaf-green-tint);
    --ons-color-success-vibrant: var(--ons-color-leaf-green-vibrant);
    --ons-color-errors: var(--ons-color-ruby-red);
    --ons-color-errors-tint: var(--ons-color-ruby-red-tint);
    --ons-color-errors-vibrant: var(--ons-color-ruby-red-vibrant);
    --ons-color-pending: var(--ons-color-jaffa-orange);
    --ons-color-pending-tint: var(--ons-color-jaffa-orange-tint);
    --ons-color-pending-vibrant: var(--ons-color-jaffa-orange-vibrant);
    --ons-color-dead: var(--ons-color-grey-75);
    --ons-color-instruction: var(--ons-color-jaffa-orange);
    --ons-color-instruction-tint: var(--ons-color-jaffa-orange-tint);
    --ons-color-text-disabled: var(--ons-color-grey-35);
    --ons-color-border-disabled: var(--ons-color-grey-35);
}