/* ============================================================ *
   SETTINGS

   The Settings layer contains definitions for colours, fonts,
   layouts, typography and anything that can be later used within
   a style. This layer is a configuration for the CSS project.
   No CSS should be outputted from this layer.
 * ============================================================ */
:root.theme-hawkeye,
:root.theme-hawkeye .mode-light {
    /* -------------------- SITE SETTINGS -------------------- */

    /* -------------------- COLORS -------------------- */
    --color-10: var(--cd-purple-10);
    --color-20: var(--cd-purple-20);
    --color-30: var(--cd-purple-30);
    --color-40: var(--cd-purple-40);
    --color-50: var(--cd-purple-50);
    --color-60: var(--cd-purple-60);
    --color-70: var(--cd-purple-70);
    --color-80: var(--cd-purple-80);
    --color-90: var(--cd-purple-90);
    --color-100: var(--cd-purple-100);

    /* Neutral color family */
    --color-neutral-10: var(--cd-cold-grey-10);
    --color-neutral-20: var(--cd-cold-grey-20);
    --color-neutral-30: var(--cd-cold-grey-30);
    --color-neutral-40: var(--cd-cold-grey-40);
    --color-neutral-50: var(--cd-cold-grey-50);
    --color-neutral-60: var(--cd-cold-grey-60);
    --color-neutral-70: var(--cd-cold-grey-70);
    --color-neutral-80: var(--cd-cold-grey-80);
    --color-neutral-90: var(--cd-cold-grey-90);
    --color-neutral-100: var(--cd-cold-grey-100);

    /* -------------------- COLOR SCHEMES -------------------- *
    *  Definitions for switching to light mode */
    --color-ui-bg: var(--color-neutral-100);

    /* -------------------- CUSTOM ELEMENTS -------------------- */
    --forms-outline-color: var(--color-interactive-area);
    --theme-mode-switcher-icon-color: var(--color-40);
}

:root.theme-hawkeye.mode-dark,
:root.theme-hawkeye .mode-dark {
    /* Neutral color family */
    --color-neutral-10: var(--cd-warm-grey-10);
    --color-neutral-20: var(--cd-warm-grey-20);
    --color-neutral-30: var(--cd-warm-grey-30);
    --color-neutral-40: var(--cd-warm-grey-40);
    --color-neutral-50: var(--cd-warm-grey-50);
    --color-neutral-60: var(--cd-warm-grey-60);
    --color-neutral-70: var(--cd-warm-grey-70);
    --color-neutral-80: var(--cd-warm-grey-80);
    --color-neutral-90: var(--cd-warm-grey-90);
    --color-neutral-100: var(--cd-warm-grey-100);

    /* -------------------- COLOR SCHEMES -------------------- *
    *  Definitions for switching to dark mode */
    --gradient-background: linear-gradient(to bottom, var(--cd-purple-20) 200px, var(--cd-violet-10) 1000px) repeat;
    --color-ui-bg: var(--gradient-background);

    /* -------------------- UI COLORS -------------------- */
    --color-ui-1: var(--color-10);
    --color-ui-2: var(--color-20);
    --color-ui-3: var(--color-40);
    --forms-color-disabled: var(--color-neutral-40);
    --forms-border-color: var(--color-30);

    /* -------------------- CUSTOM ELEMENTS -------------------- */
    --theme-mode-switcher-icon-color: var(--color-70);
}

/* ============================================================ *
   GENERIC

   The Generic layer contains styles that should be applied
   widely across the DOM, i.e. you could apply styles to the
   html, body or * selectors.
 * ============================================================ */
.theme-hawkeye body {
    background: var(--color-ui-bg);
}

/* ============================================================ *
   ELEMENTS

   The Elements layer contains styles applicable to HTML tag
   names only -- such as body, p, table, h1, etc. No class names
   or nested selectors should be used in this layer.
 * ============================================================ */

/* -------------------- TYPOGRAPHY -------------------- */

/* -------------------- TABLES -------------------- */

/* -------------------- FORMS -------------------- */

/* -------------------- FORM INPUT VARIATION error -------------------- */

/* ============================================================ *
   OBJECTS / LAYOUT

   The Objects layer targets elements by their class name only.
   Also, styles in this layer should only be of a layout nature
   -- such as height, width, padding, margin, etc -- and not apply
   any decoration -- such as colours, font-size, etc.
   If an object happens to add anything other than layout, then
   it would be moved to the next layer, Components.
 * ============================================================ */

:root.theme-hawkeye.mode-dark {
    --table-head-background: var(--color-ui-2);
}

/* -------------------- SITE LAYOUT -------------------- */
.theme-hawkeye .site-header-wrapper {
    background: var(--color-ui-1);
    color: var(--color-content-2);
}

.theme-hawkeye.mode-dark .site-header-wrapper {
    background: var(--color-20);
    color: var(--color-content-2);
}

/* -------------------- GENERAL LAYOUT -------------------- */
.theme-hawkeye .site-footer-wrapper {
    background: var(--color-ui-1);
    color: var(--color-content-2);
}

.theme-hawkeye.mode-dark .site-footer-wrapper {
    background: rgb(0 0 0 / 30%);
}

/* ============================================================ *
   UTILITIES

   The Utilities layer contains utility and helper classes that
   can override individual styles, for example a hidden class.
 * ============================================================ */