/* ########################
    Base / Global Styles
########################## */

/* Variables */
:root {
  --color-task: #b71717;
  --color-task-dark: #971212;
  --color-task-light: #e84a4a;

  --color-short: #17a3d7;
  --color-short-dark: #1388b6;
  --color-short-light: #53bdeb;

  --color-long: #166d83;
  --color-long-dark: #145f72;
  --color-long-light: #1d8fac;

  --color-bg-light: #f5f5f5;
  --color-text: #fff;
  --color-dark: #1a1a1a;

  --text-task: var(--color-task);
  --text-short: var(--color-short);
  --text-long: var(--color-long);

  --radius: 8px;
  --transition: 0.3s ease;

  --font-family: "Inter", system-ui, sans-serif;
}

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Basic Text */
body {
  font-family: var(--font-family);
  color: var(--color-text);
  transition: background-color 0.5s ease;
  padding: 1rem;
  line-height: 1.5;
}

input,
select,
button {
  font-family: inherit;
  font-size: 1rem;
}

/* Utilities */
.hidden {
  display: none !important;
}