/* 
Bunkscode Framework
Version: 0.1

---Table of Contents---
    - Theme Extras
    - Colour Palette
    - Typography
    - Gaps & Spacing
    - Box Shadows
    - Border Radii
    - Additional Properties
*/

/*---Theme Extras---*/
:root{
    --theme-focus-outline-color: var(--primary-400);
    --selection-bg-color: var(--primary-500);
    --selection-color: var(--neutral-100);
}

::selection {
    background: var(--selection-bg-color);
    color: var(--selection-color);
}

.theme--secondary {
    --theme-focus-outline-color: var(--neutral-400);
}

/* === Palette === */

:root {
    /* Brand Colours */
    
    --primary-hue: 229;
    --primary-sat: 62%;
    --primary-lightness: 0.28; /* e.g. Lightness of 49% = 0.49 */

    --secondary-hue: 52;
    --secondary-sat: 99%;
    --secondary-lightness: 0.54;

    --tertiary-hue: 213;
    --tertiary-sat: 24%;
    --tertiary-lightness: 0.93;

    --shade-hue: 228;
    --shade-sat: 43%;
    --shade-lightness: 0.16;

    /* Main + Shades */
    --primary-100: hsl( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 148% ) );
    --primary-200: hsl( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 140% ) );
    --primary-300: hsl( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 110% ) );
    --primary-400: hsl( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 100% ) );
    --primary-500: hsl( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 70% ) );
    --primary-trans-80: hsla( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 100% ), 0.8);
    --primary-trans-60: hsla( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 100% ), 0.6);
    --primary-trans-40: hsla( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 100% ), 0.4);
    --primary-trans-20: hsla( var(--primary-hue), var(--primary-sat), calc(var(--primary-lightness) * 100% ), 0.2);

    --secondary-100: hsl( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 190% ) );
    --secondary-200: hsl( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 180% ) );
    --secondary-300: hsl( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 110% ) );
    --secondary-400: hsl( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 100% ) );
    --secondary-500: hsl( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 90% ) );
    --secondary-trans-80: hsla( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 100% ), 0.8);
    --secondary-trans-60: hsla( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 100% ), 0.6);
    --secondary-trans-40: hsla( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 100% ), 0.4);
    --secondary-trans-20: hsla( var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-lightness) * 100% ), 0.2);

    --tertiary-100: hsl( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 195% ) );
    --tertiary-200: hsl( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 110% ) );
    --tertiary-300: hsl( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 105% ) );
    --tertiary-400: hsl( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 100% ) );
    --tertiary-500: hsl( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 90% ) );
    --tertiary-trans-80: hsla( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 100% ), 0.8);
    --tertiary-trans-60: hsla( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 100% ), 0.6);
    --tertiary-trans-40: hsla( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 100% ), 0.4);
    --tertiary-trans-20: hsla( var(--tertiary-hue), var(--tertiary-sat), calc(var(--tertiary-lightness) * 100% ), 0.2);
    
    --shade-100: hsl( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 195% ) );
    --shade-200: hsl( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 185% ) );
    --shade-300: hsl( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 110% ) );
    --shade-400: hsl( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 100% ) );
    --shade-500: hsl( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 90% ) );
    --shade-trans-80: hsla( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 100% ), 0.8);
    --shade-trans-60: hsla( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 100% ), 0.6);
    --shade-trans-40: hsla( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 100% ), 0.4);
    --shade-trans-20: hsla( var(--shade-hue), var(--shade-sat), calc(var(--shade-lightness) * 100% ), 0.2);
    
    /* Standard Colours */
    --transparent: transparent;
    --white: #fff;
    --black: #000;

    /* Neutral Colours */

    --neutral-100: hsl( 0, 0%, 100% );
    --neutral-200: hsl( 0, 0%, 75% );
    --neutral-300: hsl( 0, 0%, 50% );
    --neutral-400: hsl( 0, 0%, 25% );
    --neutral-500: hsl( 0, 0%, 0% );
    
    /* System & UI Colours */
    --success-hue: 125;
    --success-sat: 58%;
    --success-lightness: 0.48;

    --info-hue: 201;
    --info-sat: 100%;
    --info-lightness: 0.44;

    --warning-hue: 29;
    --warning-sat: 95%;
    --warning-lightness: 0.63;

    --danger-hue: 0;
    --danger-sat: 64%;
    --danger-lightness: 0.55;

    --success-100: hsl( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 195% ) );
    --success-200: hsl( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 185% ) );
    --success-300: hsl( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 110% ) );
    --success-400: hsl( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 100% ) );
    --success-500: hsl( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 90% ) );
    --success-trans-80: hsla( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 100% ), 0.8);
    --success-trans-60: hsla( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 100% ), 0.6);
    --success-trans-40: hsla( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 100% ), 0.4);
    --success-trans-20: hsla( var(--success-hue), var(--success-sat), calc(var(--success-lightness) * 100% ), 0.2);
    
    --info-100: hsl( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 195% ) );
    --info-200: hsl( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 185% ) );
    --info-300: hsl( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 110% ) );
    --info-400: hsl( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 100% ) );
    --info-500: hsl( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 90% ) );
    --info-trans-80: hsla( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 100% ), 0.8);
    --info-trans-60: hsla( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 100% ), 0.6);
    --info-trans-40: hsla( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 100% ), 0.4);
    --info-trans-20: hsla( var(--info-hue), var(--info-sat), calc(var(--info-lightness) * 100% ), 0.2);
    
    --warning-100: hsl( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 195% ) );
    --warning-200: hsl( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 185% ) );
    --warning-300: hsl( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 110% ) );
    --warning-400: hsl( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 100% ) );
    --warning-500: hsl( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 90% ) );
    --warning-trans-80: hsla( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 100% ), 0.8);
    --warning-trans-60: hsla( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 100% ), 0.6);
    --warning-trans-40: hsla( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 100% ), 0.4);
    --warning-trans-20: hsla( var(--warning-hue), var(--warning-sat), calc(var(--warning-lightness) * 100% ), 0.2);

    --danger-100: hsl( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 195% ) );
    --danger-200: hsl( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 185% ) );
    --danger-300: hsl( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 110% ) );
    --danger-400: hsl( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 100% ) );
    --danger-500: hsl( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 90% ) );
    --danger-trans-80: hsla( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 100% ), 0.8);
    --danger-trans-60: hsla( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 100% ), 0.6);
    --danger-trans-40: hsla( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 100% ), 0.4);
    --danger-trans-20: hsla( var(--danger-hue), var(--danger-sat), calc(var(--danger-lightness) * 100% ), 0.2);    
}

/*---Typography---*/

.eyebrow {
    font-size: var(--body);
    line-height: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .eyebrow {
        font-size: var(--body-xs);
    }
}

p a {
    font-weight: 700;
    text-decoration: underline;
}

/* === Grids === */
:root {
    --default-grid-gap: var(--space-m);
}

/* === Spacing === */

:root {
    --space-xxxl: 12rem;
    --space-xxl: 8rem;
    --space-xl: 6.4rem;
    --space-l: 3.2rem;
    --space-m: 2.4rem;
    --space-s: 1.6rem;
    --space-xs: 0.8rem;
    --space-xxs: 0.4rem;
    --space-xxxs: 0.2rem;
}

/* === Shadows === */

:root {
    --shadow-100: 0 4px 6px 0px var(--shade-trans-20);
    --shadow-200: 0 6px 12px 0px var(--shade-trans-20);
    --shadow-300: 0 12px 24px 0px var(--shade-trans-20);
    --shadow-400: 0 24px 32px 0px var(--shade-trans-20);
}

/*---Border Radii---*/

:root {
    --radius-s: 0.8rem;
    --radius-m: 1.6rem;
    --radius-l: 2.4rem;
}

/*---Other---*/

:root {
    --outline: 2px solid var(--theme-focus-outline-color);
    --outline-offset: 4px;
}

.column {
    row-gap: var(--space-xl);
}

.column--section {
    row-gap: var(--space-l);
}

.button-group {
    gap: var(--space-m);
}