@import "lib/props.shadows.css";

@font-face {
  font-family: 'Open Sans';
  src: url(./lib/OpenSans-VariableFont.ttf);
}

/* TODO Change colour-scheme to yellow (or green) */
:root {
	--font-family: 'Open Sans', sans-serif;
	--border-radius: 1px;
	--transition-delay: 0.1s ease-in-out;
	/* --item-shadow: var(--shadow-3); */
	--item-shadow: none;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
	--text-primary-color: hsl(220 13% 10%);
	--text-selection-color: rgba(240, 96, 72, 0.25);
	--text-color-inverse: #fff;

	--background-color: hsl(220 13% 95%);
	--background-color-light: hsl(220 13% 98%);
	--background-inverse: hsla(220, 13%, 10%, 90%);
	--header-color: hsl(220 13% 90%);

	--muted-color: #646b79;
	--muted-border-color: rgb(190, 194, 201);

	--color-primary: #c52f21;
	--color-primary-text: #c52f21;
	--color-primary-underline: rgba(197, 47, 33, 0.5);
	--color-primary-hover: #9b2318;
	--color-primary-hover-background: #af291d;
	--color-primary-hover-border: var(--color-primary-hover-background);
	--color-primary-hover-underline: var(--color-primary-hover);
	--color-primary-focus: rgba(240, 96, 72, 0.5);
}

/* Dark mode */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
	--text-primary-color: hsl(220 13% 95%);
	--text-selection-color: rgba(240, 96, 72, 0.35);
	--text-color-inverse: #fff;

	--background-color: hsl(220 13% 10%);
	--background-color-light: hsl(220 13% 13%);
	--background-inverse: hsla(220, 13%, 10%, 90%);
	--header-color: hsl(220 13% 13%);

	--muted-color: #a8adb8;
	--muted-border-color: rgb(65, 69, 76);

	--color-primary: #c52f21;
	--color-primary-text: #e84d3d;
	--color-primary-underline: rgba(197, 47, 33, 0.5);
	--color-primary-hover: #9b2318;
	--color-primary-hover-background: #af291d;
	--color-primary-hover-border: var(--color-primary-hover-background);
	--color-primary-hover-underline: var(--color-primary-hover);
	--color-primary-focus: rgba(240, 96, 72, 0.5);

	/* --color-primary-underline: rgba(232, 77, 61, 0.5);
	--color-primary-hover: #ff6b5a;
	--color-primary-hover-background: #d4432f;
	--color-primary-hover-border: var(--color-primary-hover-background);
	--color-primary-hover-underline: var(--color-primary-hover);
	--color-primary-focus: rgba(240, 96, 72, 0.5); */
  }
}

/* TODO Light/Dark mode toggle with document.documentElement.setAttribute('data-theme', 'dark'); */
/* [data-theme="dark"] {
	--text-primary-color: hsl(220 13% 95%);
    --background-color: hsl(220 13% 10%);
	--header-color: hsl(220 13% 15%);
} */