/* static/css/styles.css */

/*@import "@fontsource/fira-mono";*/

/*

Desktop-first media queries:

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 1439px) {
}

Mobile-first media queries:

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
*/

:root {
  /* Colour palette for website UI */
  --colour-red-pastel: #F88379;
  --colour-red-saturated: oklch(0.55 0.17 40);
  --colour-maroon-saturated: oklch(0.3887 0.134 26.07);
  --colour-maroon-saturated-faded: oklch(0.6314 0.1849 33.52 / 0.2);
  --colour-orange-pastel: #FFD580;
  --colour-orange-saturated: oklch(0.8057 0.166 73.15);
  --colour-orange-saturated-faded: oklch(0.80572 0.16603 73.151 / 0.2);
  --colour-yellow-pastel: #FFEE8C;
  --colour-yellow-saturated: #FBEC5D;
  --colour-green-pastel: #9FE2BF;
  --colour-green-saturated: oklch(76% .177 163.223);
  --colour-blue-pastel: #6495ED;
  --colour-blue-saturated: #0070F3;
  --colour-purple-pastel: #7078EC;
  --colour-purple-saturated: #434DE7;
  --colour-white-out: oklch(1 0 0);
  /*--colour-white: oklch(99% 0.0041 91.45);*/
  --colour-white: oklch(99.5% 0.002 91.45);
  --colour-white-off: oklch(98.2% 0.0041 91.45);
  --colour-white-dirty: oklch(92.5% 0.0041 91.45);
  --colour-grey-light: oklch(87.5% 0.0041 91.45);
  --colour-grey: oklch(82.7% 0.0041 91.45);
  --colour-grey-dirty: oklch(75% 0.0041 91.45);
  --colour-grey-dark-dirty: oklch(58% 0.01 260.45);
  --colour-grey-dark: oklch(40% 0.03137 260.45);
  --colour-grey-darker: oklch(25.49% 0.03137 260.45);
  --colour-black: oklch(20.88% 0.0281 262.38);
  --colour-linen: oklch(90% 0.03 78);
  --colour-purple-dark: oklch(0.3493 0.023 311.2);

  /* Perfect Fourth Typography */
  --ratio-down: 1.2;
  --ratio: 1.333;
  --step--4: calc(var(--step--3) / var(--ratio-down));
  --step--3: calc(var(--step--2) / var(--ratio-down));
  --step--2: calc(var(--step--1) / var(--ratio-down));
  --step--1: calc(var(--step-0) / var(--ratio-down));
  --step-0: 1rem;
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));

  /* Overline */
  --overline-size: var(--step--3);
  --overline-weight: 500;
  --overline-line-height: 1.5;
  --overline-letter-spacing: 0em;


  /* Caption Small */
  --caption-sm-size: var(--step--2);
  --caption-sm-weight: 300;
  --caption-sm-line-height: 1.5;
  --caption-sm-letter-spacing: 0em;


  /* Caption */
  --caption-size: var(--step--1);
  --caption-weight: 400;
  --caption-line-height: 1.5;
  --caption-letter-spacing: 0em;


  /* Caption Large */
  --caption-lg-size: var(--step-0);
  --caption-lg-weight: 400;
  --caption-lg-line-height: 1.5;
  --caption-lg-letter-spacing: 0em;


  /* Body Small */
  --body-sm-size: var(--step--1);
  --body-sm-weight: 400;
  --body-sm-line-height: 1.5;
  --body-sm-letter-spacing: 0em;


  /* Body */
  --body-size: var(--step-0);
  --body-weight: 400;
  --body-line-height: 1.5;
  --body-letter-spacing: 0em;


  /* Body Large */
  --body-xl-size: var(--step-1);
  --body-xl-weight: 400;
  --body-xl-line-height: 1.5;
  --body-xl-letter-spacing: 0em;


  /* H6 */
  --h6-size: var(--step-0);
  --h6-weight: 500;
  --h6-line-height: 1.45;
  --h6-letter-spacing: -0.01em;


  /* H5 */
  --h5-size: var(--step-1);
  --h5-weight: 500;
  --h5-line-height: 1.4;
  --h5-letter-spacing: -0.015em;


  /* H4 */
  --h4-size: var(--step-2);
  --h4-weight: 500;
  --h4-line-height: 1.35;
  --h4-letter-spacing: -0.015em;


  /* H3 */
  --h3-size: var(--step-3);
  --h3-weight: 600;
  --h3-line-height: 1.3;
  --h3-letter-spacing: -0.015em;


  /* H2 */
  --h2-size: var(--step-4);
  --h2-weight: 600;
  --h2-line-height: 1.25;
  --h2-letter-spacing: -0.02em;


  /* H1 */
  --h1-size: var(--step-5);
  --h1-weight: 700;
  --h1-line-height: 1.2;
  --h1-letter-spacing: -0.02em;


  /* Display Medium */
  --display-md-size: var(--step-4);
  --display-md-weight: 800;
  --display-md-line-height: 1.5;
  --display-md-letter-spacing: 0.015em;


  /* Display Large */
  --display-lg-size: var(--step-5);
  --display-lg-weight: 800;
  --display-lg-line-height: 1.5;
  --display-lg-letter-spacing: 0.015em;


  /* Typography */
  --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: Merriweather, "Georgia", Times, serif;
  --font-mono: "JetBrains Mono", "Fira Mono", "Courier New", monospace;
  --font-editorial: "EB Garamond", "Garamond", "Times New Roman", serif;

  /* Transition Styles */
  --transition-slow: 200ms ease-in, outline 1ms;
  --transition-fast: 150ms ease-in-out, outline 1ms;

  /* Sizing */
  --spacing: 0.25rem;
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-circular: 3.40282e38px;

  --border-thin: 1px solid var(--colour-border);
  --border-thick: 1.5px solid var(--colour-border);

  /* Theme Colours */
  --colour-theme-1: var(--colour-maroon-saturated);
  --colour-theme-1-faded: var(--colour-maroon-saturated-faded);
  --colour-theme-2: var(--colour-purple-dark);
  --colour-theme-3: var(--colour-linen);

  --colour-success: var(--colour-green-saturated);
  --colour-error: var(--colour-red-saturated);

  --colour-shadow: color-mix(in oklab, var(--colour-text) 10%, transparent);
  --colour-navigation-background: color-mix(in oklab, var(--colour-background) 85%, transparent);
}

:root,
[data-theme='light'] {
  --colour-background: var(--colour-white-off);
  --colour-background-secondary: var(--colour-linen);
  --colour-box: var(--colour-white);
  --colour-border: var(--colour-white-dirty);
  --colour-placeholder: var(--colour-grey);

  --colour-text-bright: var(--colour-background);
  --colour-text-light: var(--colour-grey-dark-dirty);
  --colour-text: var(--colour-black);

  --box-shadow-strong: 0 0.25rem 0.625rem color-mix(in oklch, var(--colour-text) 20%, transparent);
  --box-shadow-weak: 0 0.25rem 0.625rem color-mix(in oklch, var(--colour-text) 10%, transparent);
}

[data-theme='dark'] {
  --colour-background: var(--colour-black);
  --colour-background-secondary: var(--colour-grey-darker);
  --colour-box: var(--colour-grey-darker);
  --colour-border: var(--colour-grey-dark);
  --colour-placeholder: var(--colour-grey-dark-dirty);

  --colour-text-bright: var(--colour-white-out);
  --colour-text-light: var(--colour-grey-dirty);
  --colour-text: var(--colour-white-off);

  --box-shadow-strong: 0 0 0 color-mix(in oklch, var(--colour-text) 20%, transparent);
  --box-shadow-weak: 0 0 0 color-mix(in oklch, var(--colour-text) 10%, transparent);
}

* {
  /* 
   Apply border-box model to all elements for consistent sizing and layout.
   This ensures that padding and borders are included in the element's total width and height.
   Vendor prefixes are included for compatibility with older browsers.
  */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;

  /*overflow: hidden;*/
}

html {
  font-size: clamp(14px, 0.9vw + 7px, 16px);
}

body {
  background-color: var(--colour-background);
  background-attachment: fixed;

  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: var(--body-size);

  scrollbar-color: var(--colour-theme-1) var(--colour-background);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: var(--font-heading);
  margin: 0.25em 0;
}

h1,
.h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

h2,
.h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3,
.h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4,
.h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h5,
.h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

h6,
.h6 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

p,
.paragraph {
  margin: 0 0 0.5rem 0;
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

a {
  color: var(--colour-theme-1);
  font-weight: 600;
  text-decoration: underline;
}

a:hover {
  color: parent;
  text-decoration: underline;
}

input,
button {
  border: none;

  font-size: inherit;
  font-family: inherit;
}

img {
  display: inline-block;

  max-width: 100%;

  vertical-align: middle;

  background-color: var(--colour-grey-light);
}

.visually-hidden {
  position: absolute;

  border: 0;

  clip: rect(0 0 0 0);

  margin: 0;

  width: 0.0625rem;
  height: auto;

  padding: 0;

  overflow: hidden;

  white-space: nowrap;
}

.hide {
  display: none;
}

li {
  margin-bottom: 0.5em;
  line-height: 1.4em;
}