:root {
  /* Colours */
  /* Blue #000895 */
  --blue-hue: 264.16;
  --blue-2: oklch(75.396% 0.1034 var(--blue-hue));
  --blue-20: oklch(38.49% 0.1034 var(--blue-hue) / 20%);
  --blue-100: oklch(30.84% 0.2059 var(--blue-hue));
  --blue: var(--blue-100);

  /* Very dark blue #2A3150 */
  --blue-hue: 273.2;
  --blue-2: oklch(75.396% 0.1034 var(--blue-hue));
  --blue-20: oklch(38.49% 0.1034 var(--blue-hue) / 20%);
  --blue-6: oklch(30.84% 0.2059 var(--blue-hue));
  /* --blue-100: oklch(32.21% 0.0561 var(--blue-hue));
  --vdk-blue: var(--blue-100); */

  /* Purple #6B7BC7 */
  --purple-hue: 273.41;
  --purple-40: oklch(60.36% 0.1171 var(--purple-hue) / 40%);
  --purple-100: oklch(60.36% 0.1171 var(--purple-hue));
  --purple: var(--purple-100);

  /* Purple #98ACF9 */
  --purple-hue: 272.33;
  --purple-40: oklch(60.36% 0.1171 var(--purple-hue) / 40%);
  --purple-100: oklch(75.91% 0.1133 var(--purple-hue));
  /* --purple-rgb-100: rgb(152, 172, 249); */
  --purple: var(--purple-100);

  /* Violet #B5BEFA */
  --violet-hue: 277.71;
  --violet-2: oklch(99.8% 0.005 var(--violet-hue));
  --violet-5: oklch(97% 0.0122 var(--violet-hue));
  --violet-15: oklch(81.57% 0.0852 var(--violet-hue) / 15%);
  --violet-20: oklch(81.57% 0.0852 var(--violet-hue) / 20%);
  --violet-40: oklch(81.57% 0.0852 var(--violet-hue) / 40%);
  --violet-100: oklch(81.57% 0.0852 var(--violet-hue));
  --violet: var(--violet-100);

  /* Red #A8151D */
  --red-hue: 25.81;
  --red-80: oklch(46.91% 0.1787 var(--red-hue) / 80%);
  --red-100: oklch(46.91% 0.1787 var(--red-hue));
  --red: var(--red-100);

  /* Black #1E1E1E */
  --black-hue: none;
  --black-5: oklch(23.5% 0 var(--black-hue) / 5%);
  --black-100: oklch(23.5% 0 var(--black-hue));
  --black: var(--black-100);

  /* White #FFFFFF */
  --white: oklch(100% none none);

  /* Typography */
  --body-font-family: "Montserrat", "MS Serif", "New York", "Times New Roman";
  --heading-font-family: "Cascadia Mono", Verdana, "MS Sans Serif", Geneva;
  --font-size-xxs: clamp(0.5rem, 0.17vw + 0.76rem, 0.69rem);
  --font-size-xs: clamp(0.6rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 1rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
  --fw-100: "wght" 100;
  --fw-400: "wght" 400;
  --fw-500: "wght" 500;
  --fw-600: "wght" 600;
  --fw-700: "wght" 700;
  --fw-800: "wght" 800;
  --fw-900: "wght" 900;
  --fs-italic: italic;

  /* Shadow */
  --shadow-strength: 10%;
  --shadow-color: 220 40% 2%;
  --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 7%));

  /* Padding */
  --lg-padding: 1.25rem;
  --base-padding: 0.75rem;
  --sm-padding: 0.5rem;
  --xs-padding: 0.25rem;

  /* THEME COLOURS */

  /* Light Theme as the default */

  /* Backgrounds */
  --bg: var(--purple-1);
  --bg-sheet: var(--violet-2);

  /* Foreground */
  --fg: var(--blue);
  --fg-sheet: var(--blue);

  /* Interface Colour */
  --primary: var(--blue);
  --accent: var(--purple);
  --subtle-accent: var(--violet);
  --warning: var(--red);
  --success: var(--green);
  --line: var(--primary);
  --tint-or-shade: color-mix(in oklab, var(--fg), transparent 75%);

  /* Borders */
  --brad: 5px;
  --border-size-1: 1px;
  --border-size-2: 1.5px;
  --border-size-3: 2px;
  --border-thin: solid var(--border-size-1) var(--fg);
  --border: solid var(--border-size-2) var(--fg);
  --border-thick: solid var(--border-size-3) var(--fg);
  --border-rad-1: 2px;
  --border-rad-2: 4px;
  --border-rad-3: 8px;
}