/**
Type
 */
/* @link https://utopia.fyi/type/calculator/?c=320,13,1.2,1240,20,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */

:root {
    --step--2: clamp(0.5642rem, 0.4822rem + 0.41vw, 0.8rem);
    --step--1: clamp(0.6771rem, 0.5648rem + 0.5616vw, 1rem);
    --step-0: clamp(0.8125rem, 0.6603rem + 0.7609vw, 1.25rem);
    --step-1: clamp(0.975rem, 0.7707rem + 1.0217vw, 1.5625rem);
    --step-2: clamp(1.17rem, 0.8976rem + 1.362vw, 1.9531rem);
}

/**
Spacing
 */

/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */

:root {
    --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
    --space-2xs: clamp(0.4375rem, 0.3723rem + 0.3261vw, 0.625rem);
    --space-xs: clamp(0.6875rem, 0.6005rem + 0.4348vw, 0.9375rem);
    --space-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-m: clamp(1.3125rem, 1.1168rem + 0.9783vw, 1.875rem);
    --space-l: clamp(1.75rem, 1.4891rem + 1.3043vw, 2.5rem);
    --space-xl: clamp(2.625rem, 2.2337rem + 1.9565vw, 3.75rem);
    --space-2xl: clamp(3.5rem, 2.9783rem + 2.6087vw, 5rem);
    --space-3xl: clamp(5.25rem, 4.4674rem + 3.913vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
    --space-2xs-xs: clamp(0.4375rem, 0.2636rem + 0.8696vw, 0.9375rem);
    --space-xs-s: clamp(0.6875rem, 0.4918rem + 0.9783vw, 1.25rem);
    --space-s-m: clamp(0.875rem, 0.5272rem + 1.7391vw, 1.875rem);
    --space-m-l: clamp(1.3125rem, 0.8995rem + 2.0652vw, 2.5rem);
    --space-l-xl: clamp(1.75rem, 1.0543rem + 3.4783vw, 3.75rem);
    --space-xl-2xl: clamp(2.625rem, 1.7989rem + 4.1304vw, 5rem);
    --space-2xl-3xl: clamp(3.5rem, 2.1087rem + 6.9565vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(0.875rem, 0.3098rem + 2.8261vw, 2.5rem);
    --space-xs-m: clamp(0.6875rem, 0.2745rem + 2.0652vw, 1.875rem);
}
.compact {
    --space-3xs: calc(0.6 * clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem));
    --space-2xs: calc(0.6 * clamp(0.4375rem, 0.3723rem + 0.3261vw, 0.625rem));
    --space-xs: calc(0.6 * clamp(0.6875rem, 0.6005rem + 0.4348vw, 0.9375rem));
    --space-s: calc(0.6 * clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem));
    --space-m: calc(0.6 * clamp(1.3125rem, 1.1168rem + 0.9783vw, 1.875rem));
    --space-l: calc(0.6 * clamp(1.75rem, 1.4891rem + 1.3043vw, 2.5rem));
    --space-xl: calc(0.6 * clamp(2.625rem, 2.2337rem + 1.9565vw, 3.75rem));
    --space-2xl: calc(0.6 * clamp(3.5rem, 2.9783rem + 2.6087vw, 5rem));
    --space-3xl: calc(0.6 * clamp(5.25rem, 4.4674rem + 3.913vw, 7.5rem));

    /* One-up pairs */
    --space-3xs-2xs: calc(0.6 * clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem));
    --space-2xs-xs: calc(0.6 * clamp(0.4375rem, 0.2636rem + 0.8696vw, 0.9375rem));
    --space-xs-s: calc(0.6 * clamp(0.6875rem, 0.4918rem + 0.9783vw, 1.25rem));
    --space-s-m: calc(0.6 * clamp(0.875rem, 0.5272rem + 1.7391vw, 1.875rem));
    --space-m-l: calc(0.6 * clamp(1.3125rem, 0.8995rem + 2.0652vw, 2.5rem));
    --space-l-xl: calc(0.6 * clamp(1.75rem, 1.0543rem + 3.4783vw, 3.75rem));
    --space-xl-2xl: calc(0.6 * clamp(2.625rem, 1.7989rem + 4.1304vw, 5rem));
    --space-2xl-3xl: calc(0.6 * clamp(3.5rem, 2.1087rem + 6.9565vw, 7.5rem));

    /* Custom pairs */
    --space-s-l: calc(0.6 * clamp(0.875rem, 0.3098rem + 2.8261vw, 2.5rem));
    --space-xs-m: calc(0.6 * clamp(0.6875rem, 0.2745rem + 2.0652vw, 1.875rem));

        /* One-up pairs */
    --space-3xs-2xs: calc(0.6 * clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem));
    --space-2xs-xs: calc(0.6 * clamp(0.4375rem, 0.2636rem + 0.8696vw, 0.9375rem));
    --space-xs-s: calc(0.6 * clamp(0.6875rem, 0.4918rem + 0.9783vw, 1.25rem));
    --space-s-m: calc(0.6 * clamp(0.875rem, 0.5272rem + 1.7391vw, 1.875rem));
    --space-m-l: calc(0.6 * clamp(1.3125rem, 0.8995rem + 2.0652vw, 2.5rem));
    --space-l-xl: calc(0.6 * clamp(1.75rem, 1.0543rem + 3.4783vw, 3.75rem));
    --space-xl-2xl: calc(0.6 * clamp(2.625rem, 1.7989rem + 4.1304vw, 5rem));
    --space-2xl-3xl: calc(0.6 * clamp(3.5rem, 2.1087rem + 6.9565vw, 7.5rem));

        /* Custom pairs */
    --space-s-l: calc(0.6 * clamp(0.875rem, 0.3098rem + 2.8261vw, 2.5rem));
    --space-xs-m: calc(0.6 * clamp(0.6875rem, 0.2745rem + 2.0652vw, 1.875rem));
}
@property --theme-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #277a13;
}

/* base background for cards etc - in light mode, white */
@property --bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #fff;
}
@property --white-black {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
}
/* accent background - in light mode, a light grey */
@property --bg-accent-1 {
    syntax: "<color>";
    inherits: true;
    initial-value: #f1f1f1;
}

/* accent background 2 - in light mode, a light green */
@property --bg-accent-2 {
    syntax: "<color>";
    inherits: true;
    initial-value: #e4eee2;
}
/* dark background for emphasis - in light mode, a dark green */
@property --bg-dark {
    syntax: "<color>";
    inherits: true;
    initial-value: #163a16;
}
/* secondary dark background for emphasis - in light mode, a dark gray */
@property --bg-dark-2 {
    syntax: "<color>";
    inherits: true;
    initial-value: #222;
}


/* base color for text - in light mode, black, with contrast OK for --bg, --bg-accent-1, --bg-accent-2  */
@property --color {
    syntax: '<color>';
    inherits: true;
    initial-value: black;
}

/* for use on background --bg) */
@property --gray {
    syntax: "<color>";
    inherits: true;
    initial-value: #595959;
}
/* secondary color for text- in light mode, dark green, with contrast OK for --bg, --bg-accent-1, --bg-accent-2  */
@property --color-accent-1 {
    syntax: "<color>";
    inherits: true;
    initial-value: #163a16;
}
/* tertiary color for text - in light mode, light cream, with contrast OK for --bg-dark  */
@property --color-on-dark {
    syntax: "<color>";
    inherits: true;
    initial-value: ivory;
}

/* border for tables, separators etc - pale grey in light mode */
@property --border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: lightgrey;
}
@property --table-border-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #f2f2f2;
}

/* focused element border color */
@property --accent-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffbc00;
}
@property --theme-color-2 {
    syntax: "<color>";
    inherits: true;
    initial-value: #f54c12;
}
@property --theme-color-3 {
    syntax: "<color>";
    inherits: true;
    initial-value: #004b72;
}

@property --color-warning {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffbc00;
}
@property --color-danger {
    syntax: "<color>";
    inherits: true;
    initial-value: #f54c12;
}
@property --color-info {
    syntax: "<color>";
    inherits: true;
    initial-value: #007ab9;
}


/* How much space at the top of the page to scroll to when an anchor is clicked */
@property --scroll-margin {
    syntax: '<length>';
    inherits: true;
    initial-value: 20px;
}


@property --border-radius {
    syntax: '<length>';
    inherits: true;
    initial-value: 5px;
}
@property --border-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 2px;
}

@property --focus-outline-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 5px;
}

@property --min-column-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 400px;
}

@property --num-columns {
    syntax: '<integer>';
    inherits: true;
    initial-value: 1;
}


@property --c1 {
    syntax: "<color>";
    inherits: true;
    initial-value: #000d6b;
}
@property --c2 {
    syntax: "<color>";
    inherits: true;
    initial-value: #9c19e0;
}
@property --c3 {
    syntax: "<color>";
    inherits: true;
    initial-value: #ff5da2;
}
@property --c4 {
    syntax: "<color>";
    inherits: true;
    initial-value: #99ddcc;
}

@property --c5 {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffadad;
}
@property --c6 {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffd6a5;
}
@property --c7 {
    syntax: "<color>";
    inherits: true;
    initial-value: #fdffb6;
}
@property --c8 {
    syntax: "<color>";
    inherits: true;
    initial-value: #caffbf;
}
@property --c9 {
    syntax: "<color>";
    inherits: true;
    initial-value: #9bf6ff;
}
@property --c10 {
    syntax: "<color>";
    inherits: true;
    initial-value: #a0c4ff;
}
@property --c11 {
    syntax: "<color>";
    inherits: true;
    initial-value: #bdb2ff;
}
@property --c12 {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffc6ff;
}


/*
Lamplight variables
 */
:root {


    color-scheme: dark light;

    @media (prefers-color-scheme: dark) {

        --color-root-hue: 120;
        --color-root-saturation: 80%;
        --color-root-lightness: 87%;

        --color-bg-hue: 0;
        --color-bg-saturation: 0%;
        --color-bg-lightness: 5%;

        --bg-stripe1-lightness: 18%;
        --bg-stripe2-lightness: 13%;

        --color-root-varyby: 10;

        --bg: #131313;
        --white-black: #000;
        --bg-accent-1: #2b2b2b;
        --bg-accent-2: #3f4f3d;
        --bg-dark: #163a16;
        --bg-dark-2: #222;
        --theme-color: #c2ffb4;



        --color: #fff;
        --color-accent-1: #e4eee2;
        --color-on-dark: ivory;
        --gray: #A3A3A3;

        --c1: #ffc6ff;
        --c2: #bdb2ff;
        --c3: #a0c4ff;
        --c4: #9bf6ff;
        --c5: #caffbf;
        --c6: #fdffb6;
        --c7: #ffd6a5;
        --c8: #ffadad;
        --c9: #fa7ab0;
        --c10: #c66af6;
        --c11: #4151c1;
        --c12: #f38661;

    }

    --c1 {

    }



}



/*
Basic element styling for Lamplight
 */
/* cyrillic-ext */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/Onest-VariableFont_wght.ttf) format('truetype');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/Onest-VariableFont_wght.ttf) format('truetype');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/Onest-VariableFont_wght.ttf) format('truetype');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/Onest-VariableFont_wght.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'RoundiconsSmiley';
    src: url(/fonts/roundicons_smiley.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    accent-color: var(--accent-color);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-block-start: 0;
    margin-block-end: var(--space-s-m);
}
p {
    margin-block-start: 0;
    margin-block-end: var(--space-xs);
}
h1 , .h1{
    font-size: var(--step-2);
    font-weight: 800;
}
h2, .h2 {
    font-size: calc(0.92 * var(--step-2));
    font-weight: 700;
}
h3, .h3 {
    font-size: calc(0.85 * var(--step-2));
    margin-block-end: var(--space-xs-s);
}
h4, .h4 {
    font-size: calc(0.78 * var(--step-2));
    margin-block-end: var(--space-xs-s);
}
h5, .h5 {
    font-size: calc(0.72 * var(--step-2));
    margin-block-end: var(--space-2xs-xs);
}
h6, .h6 {
    font-size: calc(0.7 * var(--step-2));
    margin-block-end: var(--space-2xs-xs);
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-weight: 600;
}
:is(h1, .h1, h2, .h2, h3, h4, h5, h6, .h3, .h4, .h5, .h6 ):has(.icon) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 1rem;
}

body {
    color: var(--color);
    background-color: var(--bg);
    font-size: var(--step-0);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

strong {
    font-weight: 600;
}
.text-light {
    font-weight: 300;
}
.text-heavy {
    font-weight: 700;
}

i {
    font-style: italic;
}

a {
    color: var(--color);
    display:inline-block;
/*    padding: var(--space-3xs) var(--focus-outline-width);*/
}
.vi-dark-light {
    color: var(--color-on-dark);
    background-color: var(--bg-dark);
}


::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
}
.highlighter_1 , .lplt-highlight-text, .highlighter_2, .highlighter_3 {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    font-weight:bold;
    padding: 0.05em 0.4em;
    margin-bottom: 0.2em;
    a {
        margin:0 0.5rem;
    }
}
.highlighter_1, .lplt-highlight-text {
    border: 1px solid #efdfb0;
    background-color: #fcf9d5;
}
.highlighter_2 {
    border: 1px solid #b0caef;
    background-color: #f2f7ff;
}
.highlighter_3 {
    border: 1px solid #efcab0;
    background-color: #fce5d5;
}
@media (prefers-color-scheme: dark) {
    .highlighter_1 , .lplt-highlight-text, .highlighter_2, .highlighter_3 {
        color: #0e0e0c !important;
    }
}