// Both of these should probably die and become variables as well
$spacing-vertical: 2rem;
$spacing-width: 36px;

$medium-breakpoint: 1279px;
$large-breakpoint: 1921px;

:root {
  // Width & spacing
  --page-max-width: 1420px;
  --mobile: 600px;
  --side-nav-width: 170px;
  --spacing-miniscule: calc(2rem / 5);
  --spacing-tiny: calc(2rem / 4);
  --spacing-small: calc(2rem / 3);
  --spacing-medium: calc(2rem / 2);
  --spacing-large: 2rem;
  --spacing-xlarge: 3rem;
  --spacing-main-padding: var(--spacing-xlarge);
  --file-page-max-width: 1787px;
  --file-max-height: 788px;
  --file-max-width: 1400px;
  --video-aspect-ratio: 56.25%; // 9 x 16

  // Font

  --font-multiplier-small: 0.9em;
  --font-multiplier-medium: 1.1em;
  --font-multiplier-large: 1.4em;
  --font-multiplier-xlarge: 1.6rem;
  --font-body: 1.2rem;
  --font-label: 0.9em;
  --font-subtext: 1em;
  --font-title: 1.6em;
  --font-heading: 3rem;

  // Color
  --color-background: #270f34;

  // Dark Mode
  --dm-color-01: #ddd;
  --dm-color-02: #90908f;
  --dm-color-03: #6a6a6a;
  --dm-color-04: #555254;
  --dm-color-05: #353434;
  --dm-color-06: #2e2d2e;
  --dm-color-07: #252424;
  --dm-color-08: #1e1e1e;

  // Text
  --text-max-width: 660px;
  --text-link-padding: 4px;

  // Tabs
  --tab-indicator-size: 0.5rem;

  // Input
  --input-border-size: 1px;
  --input-border-radius: 2px;
  --input-height: 2.6rem;

  // Select
  --select-height: 30px;

  // Button
  --button-radius: var(--input-border-radius);
  --button-height: var(--input-height);

  // Header
  --header-height: 5rem;

  // Card
  --card-radius: 5px;
  --card-max-width: 1000px;
  --card-box-shadow: 0px 2px 6px 0;

  // Modal
  --modal-width: 440px;

  // Animation :)
  --animation-duration: 0.2s;
  --animation-style: ease-in-out;

  // Image
  --thumbnail-preview-height: 100px;
  --thumbnail-preview-width: 177px;
  --cover-photo-height: 180px;
  --channel-thumbnail-width: 10rem;
  --channel-thumbnail-width--small: 4rem;
  --file-list-thumbnail-width: 10rem;
}