@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:ital,wght@0,500;0,700;1,500&display=swap");

[data-theme="de-stijl"] {
  --font-sans: "DM Sans", "Helvetica Neue", sans-serif;
  --font-display: "Archivo Black", sans-serif;
  --font-button: "Archivo Black", sans-serif;
  --font-mono: "DM Sans", sans-serif;
  --radius: 0;
  --border-width: 4px;
  --border-style: solid;
  --shadow: 8px 8px 0 #000;
  --button-shadow: 5px 5px 0 #000;
  --button-secondary-shadow: 4px 4px 0 #0055a4;
  --input-shadow: none;
  --heading-transform: uppercase;
  --heading-letter-spacing: 0.04em;
  --logo-transform: uppercase;
  --button-transform: uppercase;
  --body-letter-spacing: 0.01em;
  --bg: #fff8f0;
  --surface: #ffffff;
  --surface-2: #fff0d6;
  --text: #000;
  --muted: #333;
  --border: #000;
  --link: #0055a4;
  --accent: #d40909;
  --button-text: #fff;
  --button-border: #000;
  --input-bg: #fff;
  --danger: #d40909;
  --danger-bg: #ffe8e8;
  --success: #0055a4;
  --success-bg: #e8f0ff;
  --warning: #f7d000;
  --warning-bg: #fff8cc;
  --bg-texture: linear-gradient(#d40909 0 0) 0 0 / 28px 28px no-repeat,
    linear-gradient(#0055a4 0 0) 100% 100% / 36px 36px no-repeat,
    linear-gradient(#f7d000 0 0) 100% 0 / 22px 22px no-repeat;
  --card-tilt-a: rotate(-0.4deg);
  --card-tilt-b: rotate(0.35deg);
  --card-hover-transform: rotate(0deg) translate(-4px, -4px);
  --button-hover-transform: translate(-2px, -2px);
  --button-hover-filter: none;
}

[data-theme="de-stijl"] .site-header {
  --header-logo: #000000;
  --header-link: #0055a4;
  --header-link-active: #000000;
  --dropdown-bg: #ffffff;
  --dropdown-text: #000000;
  --dropdown-hover-bg: #fff0d6;
  background: #fff;
  border-bottom-width: 6px;
  border-bottom-color: #000;
}

[data-theme="de-stijl"] .site-header::after {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, #d40909 33%, #f7d000 33% 66%, #0055a4 66%);
}

[data-theme="de-stijl"] .book-card:nth-child(3n+1) {
  border-top-color: #d40909;
}

[data-theme="de-stijl"] .book-card:nth-child(3n+2) {
  border-top-color: #0055a4;
}

[data-theme="de-stijl"] .book-card:nth-child(3n) {
  border-top-color: #f7d000;
}

[data-theme="de-stijl"] .button.secondary {
  background: #f7d000;
  color: #000;
}

[data-theme="de-stijl"] .panel,
[data-theme="de-stijl"] .book-card,
[data-theme="de-stijl"] .auth-card,
[data-theme="de-stijl"] .admin-table-wrap {
  border-width: 4px;
}