/* public/CSS/style.css
   Element styles for the whole website, the colors of both themes, the
   selection and the scrollbar. Loaded by every page. */

:root {
  --color1: #f3f4f5;
  --color2: #ffffff;
  --color3: #121212;
  --color4: #5d5f63;
  --color5: #dcdee1;
  --color6: #2556d9;
  --color7: #1d8a4a;
  --color8: #b42318;
  --color9: #080707;
  --color10: #141313;
  --color11: #ecebe8;
  --color12: #a19f9b;
  --color13: #2a2726;
  --color14: #8fb3ff;
  --color15: #5fd38a;
  --color16: #ff9b8f;
  --color17: #e9ebee;
  --color18: #1d1b1a;
  --color19: #000000;
  --color20: rgba(0, 0, 0, 0.55);
  --color21: rgba(0, 0, 0, 0.3);

  --page-background: var(--color1);
  --surface-background: var(--color2);
  --body-text: var(--color3);
  --muted-text: var(--color4);
  --border: var(--color5);
  --link-text: var(--color6);
  --focus-ring: var(--color6);
  --status-dot: var(--color7);
  --error-text: var(--color8);
  --primary-button-background: var(--color3);
  --primary-button-text: var(--color2);
  --secondary-button-border: var(--color5);
  --input-background: var(--color2);
  --input-border: var(--color5);
  --chip-background: var(--color17);
  --chip-text: var(--color3);
  --selection-background: var(--color6);
  --selection-text: var(--color2);
  --scrollbar-thumb: var(--color5);
  --scrollbar-track: var(--color1);
  --photo-fade-mask: var(--color19);
  --switch-knob: var(--color2);
  --switch-knob-shadow: var(--color21);
  --dialog-backdrop: var(--color20);
}

/* The dark theme points the same purposes at the dark colors.
   The theme is chosen by views/_Components/theme_init.ejs. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-background: var(--color9);
  --surface-background: var(--color10);
  --body-text: var(--color11);
  --muted-text: var(--color12);
  --border: var(--color13);
  --link-text: var(--color14);
  --focus-ring: var(--color14);
  --status-dot: var(--color15);
  --error-text: var(--color16);
  --primary-button-background: var(--color11);
  --primary-button-text: var(--color9);
  --secondary-button-border: var(--color13);
  --input-background: var(--color10);
  --input-border: var(--color13);
  --chip-background: var(--color18);
  --chip-text: var(--color11);
  --selection-background: var(--color14);
  --selection-text: var(--color9);
  --scrollbar-thumb: var(--color13);
  --scrollbar-track: var(--color9);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
  margin: 0;
  background-color: var(--page-background);
  color: var(--body-text);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--link-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

input,
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  background-color: var(--input-background);
  border: 1px solid var(--input-border);
  border-radius: 10px;
}

textarea {
  resize: vertical;
  min-height: 140px;
}

label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background-color: var(--selection-background);
  color: var(--selection-text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}