src/styles.scss

@use "./reset";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

// JVC color theme
:root {
  color-scheme: dark;
  --body-bg: #22252a;
  --text-primary: #3d87f5;
  --text-hover-primary: #5596f6;
  --text-secondary: #f66031;
  --text-hover-secondary: #f7734a;
  --text-danger: #e4606d;
  --text-hover-danger: #dc3545;
  --text-dark: #e0e0e0;
  --text-hover-dark: #fff;
  --text-light: #000;
  --bg-color-light: #272a30;
  --bg-color-light-transparent: rgba(39, 42, 48, 0);
  --bg-color: #22252a;
  --text-color: #f2f2f2;
  --border-color: #4a4c4f;
  --border-even-color: #454f5e;
  --border-highlighted-color: #765d3f;
  --block-bg-color: #2e3238;
  --block-even-bg-color: #363e49;
  --block-highlighted-bg-color: #594126;
  --block-bg-color-hover: #353941;
  --block-bg-color-hover-dark: #454b54;
  --text-muted-color: #9e9e9e;
  --text-muted-hover-color: #bababa;
  --text-blockquote-color: #c7c7d1;
  --link-color: #7dc3f7;
  --link-hover-bg-color: #4c5767;
  --header-bg-color: #18191b;
  --header-bottom-bg-color: #000;
  --header-bottom-bg-color-hover: #303236;
  --video-footer-bg-color: #1d1e20;
  --layout-bg-color: #292d32;
  --disabled-bg-color: #1d1e20;
  --disabled-text-color: #787e87;
  --disabled-border-color: #787e87;
  --ad-bg-color: #18191b;
  --ad-border-color: #000;
  --game-header-bg-color: #2c2f35;
  --bg-light: #2c2f35;
  --game-tab-hover-bg-color: #17191c;
  --price-color: #9fafc6;
  --blue-light: #414a58;
  --live-color: #ff4d4d;
  --live-hover-color: #ff1a1a;
  --gauge-bg-color: #616161;
  --blue-gray-color: #9fafc6;
  --message-delete: #104e60;
  --message-delete-border: #092a34;
  --message-delete-gta: #46435b;
  --message-delete-gta-border: #191820;
  --input-bg-color: #303236;
  --input-border-color: #636569;
  --input-text-color: #f2f2f2;
  --input-placeholder-color: #616161;
  --form-select-indicator: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath stroke=%27%23e0e0e0%27 stroke-width=%272px%27 d=%27M2 5l6 6 6-6%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3e%3c/svg%3e");
  --form-switch-bg-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27><circle r=%273%27 fill=%27%23636569%27/></svg>");
  --admin-color: #f24444;
  --modo-color: #42b228;
  --ad-placeholder-opacity: 0.4;
  --alert-brightness: 0.85;
  --filters-bg-color: #16191d;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --white-rgb: #fff;
  --black-rgb: #000;
  --body-color-rgb: var(--text-color);
  --body-bg-rgb: var(--body-bg);
  --font-sans-serif: "Roboto", Arial, Helvetica, sans-serif;
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --root-font-size: 1rem;
  --body-font-family: "Roboto", Arial, Helvetica, sans-serif;
  --body-font-size: 0.9375rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color: var(--text-color);
  --border-width: 0.0625rem;
  --border-style: solid;
  --border-color-translucent: rgba(0, 0, 0, 0.175);
  --border-radius: 0.75rem;
  --border-radius-sm: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;
  --link-hover-color: var(--text-hover-secondary);
  --code-color: #d63384;
  --highlight-bg: #fff3cd;
  --topic-font-size: 0.8125rem;
  --topic-font-weight: 700;
  --topic-line-height: 1.25;
  --topic-gap: 0.625rem;
  --topic-title-font-size: 0.9375rem;
  --topic-title-font-weight: 500;
}

body {
  margin: 0;
  font-family: var(--body-font-family), sans-serif;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  //height: 0.0625rem;
  height: 1px;
  width: 100%;
  background-color: var(--border-color);
  display: block;
  margin: 1.5rem 0;
}

h2 {
  font-size: 1.59375rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--text-color);
  padding-bottom: 1.5rem;
}