/* color ref: https://oklch.com */
/* color gen: https://uicolors.app/generate/203b56 */
/* css ref: https://www.w3schools.com/css/default.asp  */

:root {
    --primary-color: oklch(0.6141 0.1911 27.57); /* e0473e */
    --secondary-color: oklch(0.2781 0.0296 256.85); /* 1f2937 */
    --background-color: oklch(0.9851 0 0);
    --off-background-color: oklch(0.9 0.0029 264.54);
    --light-grey: oklch(0.8717 0.0093 258.34);
    --text-color: oklch(0.2284 0.0384 282.93);
    --white-color: oklch(1 0 0);
    --off-white-color: oklch(0.95 0.0029 264.54);

    /* primary */
    --color-primary-50:  oklch(97.39% 0.0098 25.07);
    --color-primary-100: oklch(94.02% 0.0253 20.61);
    --color-primary-200: oklch(89.29% 0.0476 21.29);
    --color-primary-300: oklch(81.99% 0.0839 22.67);
    --color-primary-400: oklch(72.25% 0.1348 24.25);
    --color-primary-500: oklch(61.41% 0.1911 27.57);
    --color-primary-600: oklch(57.30% 0.1854 28.01);
    --color-primary-700: oklch(50.12% 0.1649 28.23);
    --color-primary-800: oklch(44.20% 0.1382 27.61);
    --color-primary-900: oklch(39.81% 0.1117 26.96);
    --color-primary-950: oklch(25.85% 0.0753 27.20);

    /* secondary */
    --color-secondary-50:  oklch(97.45% 0.0079 253.85);
    --color-secondary-100: oklch(94.60% 0.0160 253.90);
    --color-secondary-200: oklch(88.55% 0.0339 246.82);
    --color-secondary-300: oklch(79.03% 0.0637 243.56);
    --color-secondary-400: oklch(67.98% 0.0960 243.20);
    --color-secondary-500: oklch(58.98% 0.1100 245.01);
    --color-secondary-600: oklch(50.36% 0.1049 248.24);
    --color-secondary-700: oklch(43.21% 0.0889 249.73);
    --color-secondary-800: oklch(38.81% 0.0735 249.08);
    --color-secondary-900: oklch(34.43% 0.0580 249.85);
    --color-secondary-950: oklch(26.84% 0.0440 253.33);

    --nav-height: 64px;

    /* breakpoints — NOTE: var() is not allowed inside @media queries,
       so media queries must repeat these values literally. Keep them in sync. */
    --bp-tablet: 1024px;
    --bp-mobile: 640px;

    /* sizes */
    --font-size-32: calc(32rem / 16);
    --font-size-24: calc(24rem / 16);
    --font-size-21: calc(21rem / 16);
    --font-size-18: calc(18rem / 16);
    --font-size-12: calc(12rem / 16);
}


/* global apply */

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

html, body {
    font-family: "Fredoka", Arial, sans-serif;
    background: var(--background-color);
    font-size: var(--font-size-18);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

h1 {
    font-size: var(--font-size-32);
}


h2 {
    font-size: var(--font-size-24);
}


h3 {
    font-size: var(--font-size-21);
}


p {
    font-size: var(--font-size-18);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}


table {
  border-collapse: collapse;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--light-grey);
}

td, th {
  border: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
  border-right: 1px solid var(--light-grey);
  padding: 8px;
}

tr:nth-child(even){background-color: var(--off-background-color);}

/* Remove the redundant right border on the last column */
th:last-child, td:last-child {
  border-right: none;
}

/* Remove the redundant bottom border on the last row */
tr:last-child td {
  border-bottom: none;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--primary-color);
  color: white;
}

th a {
  color: white;
  text-decoration: none;
}


input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: calc(15rem/16);
    margin-bottom: 16px;
}

input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color);
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* ============// MARK: GLOBAL CLASSES //============ */


.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.clickable { cursor: pointer; }
.primary-text { color: var(--primary-color); }