@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    color-scheme: dark;

    --primary: #008ACF;
    --secondary: oklch(from var(--primary) calc(l + 0.15) c h);
    --accent: oklch(from var(--primary) calc(l - 0.80) c calc(h + 75.0));
    --component: hsl(from var(--primary) calc(h - 400) s l);

    --light: #fff;
    --dark: #111;

    --light-to-dark: var(--light);
    --dark-to-light: var(--dark);

    --text: #c7c7c7;

    --transition: 250ms;
    --border-radius: .25rem;

    --hue: 240;
    --hue-secondary: calc(var(--hue) + 180);
    --chroma: 0.03;
    --chroma-bg: calc(var(--chroma) * 0.5);
    --chroma-text: min(var(--chroma), 0.1);
    --chroma-action: max(var(--chroma), 0.1);
    --chroma-alert: max(var(--chroma), 0.05);

    /* BG */
    --bg-dark: oklch(0.1 var(--chroma-bg) var(--hue));
    --bg: oklch(0.15 var(--chroma-bg) var(--hue));
    --bg-light: oklch(0.2 var(--chroma-bg) var(--hue));
    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
    
    /* TEXT */
    --text: oklch(0.96 var(--chroma-text) var(--hue));
    --text-muted: oklch(0.76 var(--chroma-text) var(--hue));

    /* BORDER */
    --highlight: oklch(0.5 var(--chroma) var(--hue));
    --border: oklch(0.4 var(--chroma) var(--hue));
    --border-muted: oklch(0.3 var(--chroma) var(--hue));
    --border-card: solid 1px var(--border-muted);

    /* ACTION */
    --primary: oklch(0.76 var(--chroma-action) var(--hue));
    --secondary: oklch(0.76 var(--chroma-action) var(--hue-secondary));
    
    /* ALERT */
    --danger: oklch(0.7 var(--chroma-alert) 30);
    --warning: oklch(0.7 var(--chroma-alert) 100);
    --success: oklch(0.7 var(--chroma-alert) 160);
    --info: oklch(0.7 var(--chroma-alert) 260);

    /* SHADOWS */
    --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);

    &:has(input:checked) {
        color-scheme: light;
    }
}

&:has(#theme:checked) {
    --light-to-dark: var(--dark);
    --dark-to-light: var(--light);

    /* BG */
    --bg-dark: oklch(0.92 var(--chroma-bg) var(--hue));
    --bg: oklch(0.96 var(--chroma-bg) var(--hue));
    --bg-light: oklch(1 var(--chroma-bg) var(--hue));
    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    /* TEXT */
    --text: oklch(0.15 var(--chroma) var(--hue));
    --text-muted: oklch(0.4 var(--chroma) var(--hue));

    /* BORDER */
    --highlight: oklch(1 var(--chroma) var(--hue));
    --border: oklch(0.6 var(--chroma) var(--hue));
    --border-muted: oklch(0.7 var(--chroma) var(--hue));
    --border-card: solid 1px var(--bg);

    /* ACTION */
    --primary: oklch(0.4 var(--chroma-action) var(--hue));
    --secondary: oklch(0.4 var(--chroma-action) var(--hue-secondary));

    /* ALERT */
    --danger: oklch(0.5 var(--chroma-alert) 30);
    --warning: oklch(0.5 var(--chroma-alert) 100);
    --success: oklch(0.5 var(--chroma-alert) 160);
    --info: oklch(0.5 var(--chroma-alert) 260);
}

.button {
    display: inline-block;
    padding: .25rem .5rem;
    background-color: var(--component);
    color: var(--light);
}

.primary {
    background-color: var(--primary);
}

.secondary {
    background-color: var(--secondary);
}

html, body {
    box-sizing: border-box;
    background-color: var(--bg-dark);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
    color: var(--text-muted);
    font-family: 'Montserrat', sans-serif;
}

a {
    color: rgba(from var(--primary) r g b var(--bs-link-opacity, 1));
    text-underline-offset: .25rem;
    -webkit-text-decoration-color: rgba(from var(--light) r g b var(--bs-link-underline-opacity, .5));
    text-decoration: underline;
    text-decoration-color: rgba(from var(--light) r g b var(--bs-link-underline-opacity, .5));
    transition: all var(--transition) ease-in-out;
}

a {
    color: red;
}

/* DEFAULT START */
.card {
    background: var(--gradient);
    padding: 1rem 2rem;
    border: var(--border-card);
    border-top: 1px solid var(--highlight);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.feedback:empty {
    display: none;
}
/* DEFAULT END */

/* DEBUGS START */
.debugs {
    position: relative;
    display: flex;
    flex-direction: column;
}

.debug {
    --debug: grey;

    display: none;
    border-radius: .25rem;
    color: hsl(from var(--debug) h s 25%);
    background-color: hsl(from var(--debug) h s 90%);
    border: 1px solid var(--debug);
    margin: .5rem .5rem 0 .5rem;
    padding: .25rem .5rem;
    font-size: .9rem;
}

.debugs .debug { display: block; }

.debug.error { --debug: red; }
.debug.success { --debug: green; }
.debug.warning { --debug: orange; }
.debug.info { --debug: cyan; }
/* DEBUGS END */

/* HEADER START */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
/* HEADER END */

/* CONTENT START */
/* CONTENT END */