@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


:root {
    /* Variables */
    --primary-0: #8565e5;
    --primary-100: #ccb9f5;

    --dark-0: #121212;
    --dark-20: #282828;
    --dark-40: #3f3f3f;
    --dark-60: #575757;
    --dark-80: #717171;
    --dark-100: #8b8b8b;
    
    --white-98: #f9f9f9;
    --white-100: #fff;

    color-scheme: light dark;
}


/* Utility Classes */
.u-rounded {
    border-radius: 8px;
}
.u-large-rounded {
    border-radius: 14px;
}
.u-padding {
    padding: 1em;
}
.u-padding-large {
    padding: 3em;
}
.u-padding-top-0 {
    padding-block-start: 0;
}
.u-inside-padding {
    padding: .65em .75em;
}
.u-margin {
    margin: 1.5rem auto;
    margin-top: 4em;
}
.u-text-center {
    text-align: center;
}
.u-flex {
    display: flex;
}
.u-flex-column {
    flex-direction: column;
}
.u-flex-wrap {
    flex-wrap: wrap;
}
.u-grid {
    display: grid;
    gap: 1.5em;
}
.u-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.u-bg-light {
    background-color: var(--white-98);
}
.u-bg-primary {
    background-color: var(--primary-0);
}
.u-text-light {
    color: var(--dark-0);
}
.u-text-dark {
    color: var(--white-100);
}
.u-text-primary {
    color: var(--primary-0);
}


/* Main styles */
/* Body and Inputs */
body, input, input + label {
    font-family: "Roboto", sans-serif;
    color: var(--dark-0);
    background-color: var(--dark-100);
}

body.dark-mode {
    color: var(--white-100);
    background-color: var(--dark-80);
}

/* Container */
.container {
    max-width: 1200px;
}

body.dark-mode .container {
    background-color: var(--dark-0);
}

/* Header */
header {
    border-bottom: 1px solid var(--dark-100);
    line-height: 2em;
}

body.dark-mode header h2, body.dark-mode header h3 {
    color: var(--primary-100);
}

header h2 {
    font-size: 2rem;
    padding: 1.5rem;
    background-color: var(--white-100);
    border-radius: .75rem .75rem 0 0;
}

body.dark-mode header h2 {
    background-color: var(--dark-20);
}

/* Form */
form {
    gap: 1em;
    align-items: flex-start;
    padding-block-end: 0;
}

form input, input + label {
    border: 1px solid transparent;
    background-color: var(--primary-100);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .16px;
    margin: .5em;
}

body.dark-mode form input, input + label {
    background-color: var(--dark-40);
    color: var(--white-98);
}

form div {
    flex: 1 0 auto;
}

/* Numeric input */
div.num-input input {
    align-self: center;
    border-radius: 50px;
}

/* Fieldset, Checkbox and Label */
fieldset {
    border-width: 1px;
    border-style: solid;
    border-color: var(--dark-100);
    flex: 1 1 auto;
    justify-content: center;
}

body.dark-mode fieldset {
    border-color:  var(-dark-80);
}

input[type="checkbox"].hidden {
    opacity: 0;
}

input[type="checkbox"] + label {
    background-color: var(--dark-100);
    color: var(--dark-40);
    transition: all 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
    touch-action: manipulation;
    scale: 1;
}

body.dark-mode input[type="checkbox"] + label {
    background-color: var(--dark-20);
    color: var(--dark-100);
}

input[type="checkbox"] + label::before {
    content: "• ";
    font-size: 2em;
    vertical-align: middle;
    color: var(--primary-100);
}

input[type=checkbox] + label:is(:active) {
    scale: 0.95;
}

input[type="checkbox"]:checked + label {
    background-color: var(--primary-100);
    color: var(--dark-0); 
}
input[type="checkbox"]:checked + label::before {
    color: var(--primary-0);
}
body.dark-mode input[type="checkbox"]:checked + label {
    background-color: var(--dark-40);
    color: var(--white-100);
}

/* Submit Button */
input[type="submit"] {
    padding: 1em;
    font-weight: 700;
    font-size: 2em;
    transition: all 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

body.dark-mode input[type="submit"] {
    color: var(--white-100);
}

input[type="submit"]:active {
    scale: 0.95;
}

/* Output Section */
#output {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 1.5em;
}

/* Cards */
.idea {
    background-color: var(--primary-100);
    row-gap: 1em;
    text-align: start;
}

body.dark-mode .idea {
    background-color: var(--dark-20);
}

.idea-title {
    font-weight: 700;
    text-decoration: none;
}

body.dark-mode .idea-title {
    color: var(--white-100);
}

.idea-percent, .idea-category {
    width: max-content;
}

.idea-percent {
    border: 1px solid var(--white-98);
    letter-spacing: -1px;
}

body.dark-mode .idea-percent {
    color: var(--white-98);
    background-color: transparent;
}

.idea-categories {
    gap: .5em;
}

body.dark-mode .idea-category {
    color: var(--dark-0);
    background-color: var(--primary-100);
}

/* Theme switcher */
.theme-switcher {
    position: absolute;
    left: calc(50% - 50px);
    top: -0.5rem;
}
  
.theme-switcher input {
    width: 0px;
    height: 0px;
    visibility: hidden;
}
  
.theme-switcher input + label {
    position: relative;
    display: block;
    text-indent: -9999px;
    height: 30px;
    width: 60px;
    border-radius: 50px;
    cursor: pointer;
    transition: .5s ease background-color;
    border: 2px solid var(--primary-100);
}
  
.theme-switcher label::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--white-100);
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    transition: .5s ease;
}
  
.theme-switcher input:checked + label {
    background-color: var(--dark-0);
    border: 2px solid var(--primary-0);
}
  
.theme-switcher input:checked + label::after {
    background-color: var(--primary-0);
    left: calc(100% - 25px);
}

/* Dark color palette */
/* https://colorffy.com/dark-theme-generator?colors=8565e5-121212 */