/*IMPORT FORM*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

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

/*HTML AND BODY*/
html,
body {
  max-width: 100%;
  width: 100%;
  font-family: "Inter", sans-serif, system-ui;
  background: var(--bg);
  color: var(--color);
}

/*MAIN*/
.main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
}

/*VARIABLES*/

/*DARK THEME*/
:root {
  --bg: #000;
  --color: #fff;
  --header-bg: rgba(128, 128, 128, 0.258);
  --mainContent-bg: #1f1e1e;
  --navBtn-bg: #222;
  --active: #393838;
  --primary: #0393d6;
  --secondary: #4caf50;
  --link: #0393d6;
  --tag: var(--accent);
  --accent: #ff6b35;
  --card-bg: #111;
  --border: #333;
  --form-bg: #111;
  --input-bg: #1c1c1c;
  --input-color: #ffffff;
--chevron-color: #c5c5c5;
--danger:#e56458;

  --brand-h: 17;
  --brand-s: 70%;
  --brand-l: 50%;

  --brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --brand-hover: hsl(var(--brand-h), var(--brand-s), 50%);
  --brand-soft: hsl(var(--brand-h), var(--brand-s), 90%);

  
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

--radius: 8px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

/*LIGHT THEME SYSTEM*/
@media (prefers-color-scheme: light) {

  :root {
    --bg: #ffffff;
    --color: #000000;

  --header-bg: rgba(240, 240, 240, 0.8);
  --mainContent-bg: #f7f7f7;

  --navBtn-bg: #f0f0f0;
  --active: #e6e6e6;

  --link: #0366d6;

  --accent: #ff6b35;
  --tag: var(--accent);

  --card-bg: #ffffff;
  --border: #dcdcdc;

  --form-bg: #ffffff;
  --input-bg: #f2f2f2;
  --input-color: #000000;

  --chevron-color: #555555;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  
}
}


/*MANUALLY SELECTED LIGHT THEME*/
:root[data-theme="light"] {
    --bg: #ffffff;
    --color: #000000;

  --header-bg: rgba(240, 240, 240, 0.8);
  --mainContent-bg: #f7f7f7;

  --navBtn-bg: #f0f0f0;
  --active: #b1aeae;

  --link: #0366d6;

  --accent: #ff6b35;
  --tag: var(--accent);

  --card-bg: #ffffff;
  --border: #dcdcdc;

  --form-bg: #ffffff;
  --input-bg: #f2f2f2;
  --input-color: #000000;

  --chevron-color: #555555;
  
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/*MANUALLY SELECTED DARK THEME*/
:root[data-theme="dark"] {
  --bg: #000;
  --color: #fff;
  --header-bg: rgba(128, 128, 128, 0.258);
  --mainContent-bg: #1f1e1e;
  --navBtn-bg: #222;

  --link: #0393d6;
  --tag: var(--accent);
  --accent: #ff6b35;
  --card-bg: #111;
  --border: #333;
  --form-bg: #111;
  --input-bg: #1c1c1c;
  --input-color: #ffffff;
--chevron-color: #c5c5c5;
  
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/*COMPACT INTERFACE DENSITY*/
:root[data-density="compact"] {
   --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
}

/*Smooth text rendering*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*TYPOGRAPHY*/
h1,
h2,
h3,
h4,
h5,
h6, .statsName{
  font-weight: 600;
  color: var(--color);
}
h2 {
  text-align: center;
}
p {
  margin-bottom: var(--space-md);
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}