/* Reset */
*,
*::after,
*::before {
    box-sizing: border-box;
}

html,
body,
ul,
ol,
menu,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
pre {
    margin: 0;
    padding: 0;
}

button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
}

summary {
    list-style: none;
}

button,
input[type=radio],
input[type=checkbox],
label,
select,
summary {
    cursor: pointer;
}
/* Reset */

/* Typography - Spacing*/

p, ul, ol, pre {
    line-height: 1.5;
    margin-block-end: var(--input-spacing);
}

code, kbd, samp, pre {
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem;}
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { font-size: 1rem; }

main > section {
    padding-inline: 1rem;
}

body > header, body > footer {
    padding-inline: 1rem;
}

body > header {
    padding-block-start: 1rem;
}

body > footer {
    padding-block-end: 1rem;
}

h1,
h2,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: 0.5rem;
}

ol, ul {
    margin-inline-start: 1.5rem;
    margin-block-end: 1.5rem;
}

ul > li,
ol > li {
    margin-block-end: 0.2rem;
}

/* header nav */
nav ul, nav ul li {
    margin: 0;
}

header nav a {
    align-self: center;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
}

nav > ul > li:first-child {
    margin-inline-end: auto;
}

nav ul > li {
    align-self: center;
}
/* header nav */

.container {
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Typography - Spacing*/

body {
    scroll-behavior: smooth;
}

/* top level and values */
:root {
    color-scheme: light dark;
    scrollbar-gutter: stable;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(16px, 0.5vw + 12px, 24px);

    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");

    background-color: var(--color-neutral-50);
    color: var(--color-neutral-950);
    
    --input-border-width: 1px;
    --input-border-radius: 4px;
    --input-padding-inline: 1em;
    --input-height: 2.5rem;
    --input-spacing: 1rem;
    
    --transition-fast: 50ms;
}

svg {
    fill: currentColor;
    width: 1rem;
    margin-inline-end: 0.2rem;
}

a {
    color: var(--color-primary-600);
}

:root,
[data-theme='light'] {
    --color-primary-50: oklch(0.959 0.028 191.21);
    --color-primary-100: oklch(0.92 0.055 190.57);
    --color-primary-200: oklch(0.847 0.104 188.46);
    --color-primary-300: oklch(0.79 0.129 186.7);
    --color-primary-400: oklch(0.716 0.118 186.4);
    --color-primary-500: oklch(0.63 0.103 186.54);
    --color-primary-600: oklch(0.528 0.086 186.5);
    --color-primary-700: oklch(0.434 0.069 186.75);
    --color-primary-800: oklch(0.338 0.052 187.3);
    --color-primary-900: oklch(0.215 0.03 187.72);
    --color-primary-950: oklch(0.163 0.022 189.75);

    /* SUCCESS (Green - Hue 150) */
    --color-success-50: oklch(0.971 0.021 154.04);
    --color-success-100: oklch(0.94 0.042 152.73);
    --color-success-200: oklch(0.883 0.084 152.41);
    --color-success-300: oklch(0.83 0.127 151.12);
    --color-success-400: oklch(0.776 0.167 149.34);
    --color-success-500: oklch(0.728 0.192 147.6);
    --color-success-600: oklch(0.614 0.16 147.66);
    --color-success-700: oklch(0.509 0.13 147.99);
    --color-success-800: oklch(0.382 0.093 148.5);
    --color-success-900: oklch(0.248 0.054 148.91);
    --color-success-950: oklch(0.173 0.032 151.91);
    
    /* WARNING (Amber/Yellow - Hue 70-95) */
    /* Note: Hue shifts toward 95 (yellow) in lighter steps to stay vibrant */
    --color-warning-50:  oklch(98% 0.02 95);
    --color-warning-100: oklch(95% 0.05 95);
    --color-warning-200: oklch(90% 0.09 95);
    --color-warning-300: oklch(85% 0.12 95);
    --color-warning-400: oklch(75% 0.15 90);
    --color-warning-500: oklch(65% 0.16 85);
    --color-warning-600: oklch(55% 0.15 80); /* Midpoint */
    --color-warning-700: oklch(45% 0.13 77);
    --color-warning-800: oklch(36% 0.10 74);
    --color-warning-900: oklch(28% 0.08 72);
    --color-warning-950: oklch(20% 0.06 70);

    /* DANGER (Red - Hue 25) */
    --color-danger-50:  oklch(98% 0.02 25);
    --color-danger-100: oklch(94% 0.05 25);
    --color-danger-200: oklch(90% 0.08 25);
    --color-danger-300: oklch(85% 0.12 25);
    --color-danger-400: oklch(75% 0.17 25);
    --color-danger-500: oklch(65% 0.20 25);
    --color-danger-600: oklch(55% 0.22 25); /* Midpoint */
    --color-danger-700: oklch(45% 0.19 25);
    --color-danger-800: oklch(36% 0.16 25);
    --color-danger-900: oklch(28% 0.13 25);
    --color-danger-950: oklch(20% 0.10 25);
    
    --color-neutral-0: oklch(99% 0.005 185);
    --color-neutral-50: oklch(98.5% 0.005 185);
    --color-neutral-100: oklch(90% 0.005 185);
    --color-neutral-200: oklch(80% 0.005 185);
    --color-neutral-300: oklch(70% 0.005 185);
    --color-neutral-400: oklch(60% 0.005 185);
    --color-neutral-500: oklch(50% 0.005 185);
    --color-neutral-600: oklch(40% 0.005 185);
    --color-neutral-700: oklch(30% 0.005 185);
    --color-neutral-800: oklch(20% 0.005 185);
    --color-neutral-900: oklch(10% 0.005 185);
    --color-neutral-950: oklch(5% 0.005 185);


    --input-border-color: var(--color-neutral-200);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-950);

    --color-primary-950: oklch(0.959 0.028 191.21);
    --color-primary-900: oklch(0.92 0.055 190.57);
    --color-primary-800: oklch(0.847 0.104 188.46);
    --color-primary-700: oklch(0.79 0.129 186.7);
    --color-primary-600: oklch(0.716 0.118 186.4);
    --color-primary-500: oklch(0.63 0.103 186.54);
    --color-primary-400: oklch(0.528 0.086 186.5);
    --color-primary-300: oklch(0.434 0.069 186.75);
    --color-primary-200: oklch(0.338 0.052 187.3);
    --color-primary-100: oklch(0.215 0.03 187.72);
    --color-primary-50: oklch(0.163 0.022 189.75);

    /* SUCCESS (Green - Hue 150) */
    --color-success-950:  oklch(98% 0.01 150);
    --color-success-900: oklch(94% 0.04 150);
    --color-success-800: oklch(90% 0.06 150);
    --color-success-700: oklch(85% 0.09 150);
    --color-success-600: oklch(75% 0.12 150);
    --color-success-500: oklch(65% 0.15 150);
    --color-success-400: oklch(55% 0.16 150); /* Midpoint */
    --color-success-300: oklch(45% 0.14 150);
    --color-success-200: oklch(36% 0.12 150);
    --color-success-100: oklch(28% 0.09 150);
    --color-success-50: oklch(20% 0.06 150);
    
    /* WARNING (Amber/Yellow - Hue 70-95) */
    /* Note: Hue shifts toward 95 (yellow) in lighter steps to stay vibrant */
    --color-warning-950:  oklch(98% 0.02 95);
    --color-warning-900: oklch(95% 0.05 95);
    --color-warning-800: oklch(90% 0.09 95);
    --color-warning-700: oklch(85% 0.12 95);
    --color-warning-600: oklch(75% 0.15 90);
    --color-warning-500: oklch(65% 0.16 85);
    --color-warning-400: oklch(55% 0.15 80); /* Midpoint */
    --color-warning-300: oklch(45% 0.13 77);
    --color-warning-200: oklch(36% 0.10 74);
    --color-warning-100: oklch(28% 0.08 72);
    --color-warning-50: oklch(20% 0.06 70);

    /* DANGER (Red - Hue 25) */
    --color-danger-950:  oklch(98% 0.02 25);
    --color-danger-900: oklch(94% 0.05 25);
    --color-danger-800: oklch(90% 0.08 25);
    --color-danger-700: oklch(85% 0.12 25);
    --color-danger-600: oklch(71% 0.17 25);
    --color-danger-500: oklch(65% 0.20 25);
    --color-danger-400: oklch(55% 0.22 25); /* Midpoint */
    --color-danger-300: oklch(45% 0.19 25);
    --color-danger-200: oklch(36% 0.16 25);
    --color-danger-100: oklch(28% 0.13 25);
    --color-danger-50: oklch(20% 0.10 25);

    --color-neutral-950: oklch(98.5% 0.005 185);
    --color-neutral-900: oklch(90% 0.005 185);
    --color-neutral-800: oklch(80% 0.005 185);
    --color-neutral-700: oklch(70% 0.005 185);
    --color-neutral-600: oklch(60% 0.005 185);
    --color-neutral-500: oklch(50% 0.005 185);
    --color-neutral-400: oklch(40% 0.005 185);
    --color-neutral-300: oklch(30% 0.005 185);
    --color-neutral-200: oklch(20% 0.005 185);
    --color-neutral-100: oklch(10% 0.005 185);
    --color-neutral-50: oklch(5% 0.005 185);
    --color-neutral-0: oklch(1% 0.005 185);


    --input-border-color: var(--color-neutral-500);
}
}

[data-theme='dark'] {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-950);

    --color-primary-950: oklch(0.959 0.028 191.21);
    --color-primary-900: oklch(0.92 0.055 190.57);
    --color-primary-800: oklch(0.847 0.104 188.46);
    --color-primary-700: oklch(0.79 0.129 186.7);
    --color-primary-600: oklch(0.716 0.118 186.4);
    --color-primary-500: oklch(0.63 0.103 186.54);
    --color-primary-400: oklch(0.528 0.086 186.5);
    --color-primary-300: oklch(0.434 0.069 186.75);
    --color-primary-200: oklch(0.338 0.052 187.3);
    --color-primary-100: oklch(0.215 0.03 187.72);
    --color-primary-50: oklch(0.163 0.022 189.75);

    /* SUCCESS (Green - Hue 150) */
    --color-success-950:  oklch(98% 0.01 150);
    --color-success-900: oklch(94% 0.04 150);
    --color-success-800: oklch(90% 0.06 150);
    --color-success-700: oklch(85% 0.09 150);
    --color-success-600: oklch(75% 0.12 150);
    --color-success-500: oklch(65% 0.15 150);
    --color-success-400: oklch(55% 0.16 150); /* Midpoint */
    --color-success-300: oklch(45% 0.14 150);
    --color-success-200: oklch(36% 0.12 150);
    --color-success-100: oklch(28% 0.09 150);
    --color-success-50: oklch(20% 0.06 150);

    /* WARNING (Amber/Yellow - Hue 70-95) */
    /* Note: Hue shifts toward 95 (yellow) in lighter steps to stay vibrant */
    --color-warning-950:  oklch(98% 0.02 95);
    --color-warning-900: oklch(95% 0.05 95);
    --color-warning-800: oklch(90% 0.09 95);
    --color-warning-700: oklch(85% 0.12 95);
    --color-warning-600: oklch(75% 0.15 90);
    --color-warning-500: oklch(65% 0.16 85);
    --color-warning-400: oklch(55% 0.15 80); /* Midpoint */
    --color-warning-300: oklch(45% 0.13 77);
    --color-warning-200: oklch(36% 0.10 74);
    --color-warning-100: oklch(28% 0.08 72);
    --color-warning-50: oklch(20% 0.06 70);

    /* DANGER (Red - Hue 25) */
    --color-danger-950:  oklch(98% 0.02 25);
    --color-danger-900: oklch(94% 0.05 25);
    --color-danger-800: oklch(90% 0.08 25);
    --color-danger-700: oklch(85% 0.12 25);
    --color-danger-600: oklch(71% 0.17 25);
    --color-danger-500: oklch(65% 0.20 25);
    --color-danger-400: oklch(55% 0.22 25); /* Midpoint */
    --color-danger-300: oklch(45% 0.19 25);
    --color-danger-200: oklch(36% 0.16 25);
    --color-danger-100: oklch(28% 0.13 25);
    --color-danger-50: oklch(20% 0.10 25);

    --color-neutral-950: oklch(98.5% 0.005 185);
    --color-neutral-900: oklch(90% 0.005 185);
    --color-neutral-800: oklch(80% 0.005 185);
    --color-neutral-700: oklch(70% 0.005 185);
    --color-neutral-600: oklch(60% 0.005 185);
    --color-neutral-500: oklch(50% 0.005 185);
    --color-neutral-400: oklch(40% 0.005 185);
    --color-neutral-300: oklch(30% 0.005 185);
    --color-neutral-200: oklch(20% 0.005 185);
    --color-neutral-100: oklch(10% 0.005 185);
    --color-neutral-50: oklch(5% 0.005 185);
    --color-neutral-0: oklch(1% 0.005 185);


    --input-border-color: var(--color-neutral-500);
}
/* top level and values */

/* button */
button, .button, input[type='submit'], input[type='button'], input[type='reset'] {
    --button-background: var(--color-neutral-50);
    --button-foreground: var(--color-neutral-950);
    
    --button-background-hover: var(--color-primary-100);
    --button-border-color-hover: var(--color-primary-300);
    --button-foreground-hover: var(--color-primary-700);
    
    --button-background-active: var(--color-primary-200);
    --button-border-color-active: var(--color-primary-400);
    --button-foreground-active: var(--color-primary-700);

    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    vertical-align: middle;
    align-items: center;

    border-style: solid;
    border-width: var(--input-border-width);
    border-radius: var(--input-border-radius);
    
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    
    user-select: none;
    cursor: pointer;
    
    padding-inline: var(--input-padding-inline);
    height: var(--input-height);

    color: var(--button-foreground);
    border-color: var(--input-border-color);
    background-color: var(--button-background);

    transition: var(--transition-fast) background-color, var(--transition-fast) color, var(--transition-fast) border, var(--transition-fast) box-shadow;

    margin-block-end: var(--input-spacing);
}

/* input - keeping this close as it has a lot of similarities with button */
input, select {
    height: var(--input-height);

    border-style: solid;
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);

    padding-inline: var(--input-padding-inline);

    color: currentColor;
    border-color: var(--input-border-color);
    background-color: var(--color-neutral-50);

    margin-block-end: var(--input-spacing);
}

select {
    /* Remove the default browser arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-inline-end: calc(var(--input-padding-inline) + 1.5rem); 
}


/* input */

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']):hover {
    background-color: var(--button-background-hover);
    border-color: var( --button-border-color-hover);
    color: var(--button-foreground-hover);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']):active {
    background-color: var(--button-background-active);
    border-color: var(--button-border-color-active);
    color: var(--button-foreground-active);
}

:is(button, input, select, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']):focus-visible {
    --input-border-color: var(--color-primary-500);
    --shadow: oklch(from var(--color-primary-500) l c h / 0.4);
    box-shadow: 0 0 0 3px var(--shadow);
    outline: 1px solid var(--color-primary-600);
    outline-offset: -1px;

    transition: var(--transition-fast) box-shadow, var(--transition-fast) outline;
}   

/* The semantic color application to individual components can be customized per project */
:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).primary {
    --button-background: var(--color-primary-600);
    --button-foreground: var(--color-neutral-0);
    --input-border-color: var(--color-primary-600);
    
    --button-background-hover: var(--color-primary-500);
    --button-border-color-hover: var(--color-primary-500);
    --button-foreground-hover: var(--color-neutral-0);
    
    --button-background-active: var(--color-primary-600);
    --button-border-color-active: var(--color-primary-600);
    --button-foreground-active: var(--color-neutral-0);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).neutral {
    --button-background: var(--color-neutral-600);
    --button-foreground: var(--color-neutral-0);
    --input-border-color: var(--color-neutral-600);
    
    --button-background-hover: var(--color-neutral-500);
    --button-border-color-hover: var(--color-neutral-500);
    --button-foreground-hover: var(--color-neutral-0);
    
    --button-background-active: var(--color-neutral-600);
    --button-border-color-active: var(--color-neutral-600);
    --button-foreground-active: var(--color-neutral-0);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).success {
    --button-background: var(--color-success-600);
    --button-foreground: var(--color-neutral-0);
    --input-border-color: var(--color-success-600);
    
    --button-background-hover: var(--color-success-500);
    --button-border-color-hover: var(--color-success-500);
    --button-foreground-hover: var(--color-neutral-0);
    
    --button-background-active: var(--color-success-600);
    --button-border-color-active: var(--color-success-600);
    --button-foreground-active: var(--color-neutral-0);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).warning {
    --button-background: var(--color-warning-600);
    --button-foreground: var(--color-neutral-0);
    --input-border-color: var(--color-warning-600);
    
    --button-background-hover: var(--color-warning-500);
    --button-border-color-hover: var(--color-warning-500);
    --button-foreground-hover: var(--color-neutral-0);
    
    --button-background-active: var(--color-warning-600);
    --button-border-color-active: var(--color-warning-600);
    --button-foreground-active: var(--color-neutral-0);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).danger {
    --button-background: var(--color-danger-600);
    --button-foreground: var(--color-neutral-0);
    --input-border-color: var(--color-danger-600);
    
    --button-background-hover: var(--color-danger-500);
    --button-border-color-hover: var(--color-danger-500);
    --button-foreground-hover: var(--color-neutral-0);
    
    --button-background-active: var(--color-danger-600);
    --button-border-color-active: var(--color-danger-600);
    --button-foreground-active: var(--color-neutral-0);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).outline {
    --button-background: var(--color-neutral-50); 
    --button-foreground: var(--input-border-color);
}

.button-group {
    display: flex;
}

.button-group > :not(:first-child):not(:last-child) {
    border-radius: 0;
}

.button-group > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > :last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.button-group > *:not(:last-child) {
    border-right: 0;
}

.button-group > *:not(.outline):not(:first-child) {
    border-left: var(--input-border-width) solid var(--input-border-color);
}

:is(button, .button, input[type='submit'], input[type='button'], input[type='reset'], input[type='image']).small {
    --input-height: 2rem;
    font-size: 0.675rem;
}
/* button */

/* form */
form input:not([type="checkbox"]):not([type="radio"]), 
form select, 
form textarea,
form button[type="submit"] {
  width: 100%;
}

label {
    display: block;
    margin-block-end: 0.3rem;
}
/* form */

/* card */
.card {
    background-color: var(--color-neutral-50);
    border-color: var(--input-border-color);

    border-style: solid;
    border-width: var(--input-border-width);
    border-radius: var(--input-border-radius);
    padding-inline: var(--input-spacing);
    box-shadow: 0 1px 2px oklch(from var(--color-neutral-500) l c h / 0.06);
}

[data-theme='dark'] .card {
    background-color: var(--color-neutral-200);
    border-color: var(--color-neutral-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .card {
    background-color: var(--color-neutral-200);
    border-color: var(--color-neutral-300);
  }
}
/* card */

/* site */
footer  select {
    height: 2rem;
    padding-inline-start:0.6em;
    padding-inline-end: 2rem;
}

footer {
    display: flex;
     justify-content: space-between;
      align-items: center;
}

footer > * {
    align-self: baseline;
}
/* site */