/*
Theme Name: PB Parasport
Theme URI: https://parasport-ballerup.local
Description: Accessible custom theme for Parasport Ballerup
Author: Parasport Ballerup
Version: 1.2.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: pb-parasport
*/

/* Dark mode is default. Light mode via data-theme="light". */
:root {
  color-scheme: dark;

  --pb-bg: #0E1424;
  --pb-surface: #161D32;
  --pb-ink: #F2F4FA;
  --pb-accent: #6B8AE8;
  --pb-accent-hover: #8BA4F0;
  --pb-accent-on-soft: #9EB4F5;
  --pb-accent-soft: rgba(107, 138, 232, 0.16);
  --pb-accent-soft-hover: rgba(107, 138, 232, 0.24);
  --pb-muted: #B8C0D8;
  --pb-border: #2A3450;
  --pb-focus: #8BA4F0;
  --pb-on-accent: #0E1424;
  --pb-footer-bg: #080C16;
  --pb-footer-ink: #F2F4FA;
  --pb-footer-muted: rgba(242, 244, 250, 0.72);
  --pb-footer-border: rgba(242, 244, 250, 0.16);
  --pb-logo-pad: #FFFFFF;
  --pb-error: #F87171;
  --pb-error-soft: rgba(248, 113, 113, 0.14);
  --pb-shadow: rgba(0, 0, 0, 0.35);
  --pb-radius: 12px;
  --pb-radius-sm: 6px;
  --pb-space-sm: 8px;
  --pb-space-md: 16px;
  --pb-space-lg: 32px;
  --pb-space-xl: 64px;
  --pb-max-width: 72rem;
  --pb-font-display: "DM Sans", system-ui, sans-serif;
  --pb-font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --pb-bg: #F4F6FB;
  --pb-surface: #FFFFFF;
  --pb-ink: #111111;
  --pb-accent: #22348A;
  --pb-accent-hover: #1A2A6E;
  --pb-accent-on-soft: #22348A;
  --pb-accent-soft: rgba(34, 52, 138, 0.1);
  --pb-accent-soft-hover: rgba(34, 52, 138, 0.14);
  --pb-muted: #4A5270;
  --pb-border: #D4D9E8;
  --pb-focus: #22348A;
  --pb-on-accent: #FFFFFF;
  --pb-footer-bg: #111111;
  --pb-footer-ink: #F2F4FA;
  --pb-footer-muted: rgba(242, 244, 250, 0.75);
  --pb-footer-border: rgba(242, 244, 250, 0.2);
  --pb-logo-pad: transparent;
  --pb-error: #B91C1C;
  --pb-error-soft: rgba(185, 28, 28, 0.12);
  --pb-shadow: rgba(17, 17, 17, 0.08);
}

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

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--pb-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pb-ink);
  background: var(--pb-bg);
}

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

a {
  color: var(--pb-accent);
}

a:hover {
  color: var(--pb-accent-hover);
}

:focus-visible {
  outline: 3px solid var(--pb-focus);
  outline-offset: 3px;
}