/* PadelForm. Dark is the primary presentation: midnight navy, ice text, electric blue links.
   Light is ice. Chartreuse is the current-page rule on dark only. It is not a text colour.
   The faces are the site's own WOFF2 files. They are not loaded from a third party.
   Contrast (WCAG 2.2, contrast-ratio of the two sRGB colours):

   Dark. Text is checked on both stops of the page gradient, and on the card.
     ink       #F2F6FA on #1F1D47   14.59:1  AAA
     ink       #F2F6FA on #070A22   17.98:1  AAA
     ink       #F2F6FA on #191A47   15.11:1  AAA
     muted     #A9B4D8 on #1F1D47    7.70:1  AAA
     muted     #A9B4D8 on #070A22    9.49:1  AAA
     muted     #A9B4D8 on #191A47    7.97:1  AAA
     accent    #8DAAFF on #1F1D47    7.04:1  AAA  (links)
     accent    #8DAAFF on #070A22    8.67:1  AAA
     accent    #8DAAFF on #191A47    7.29:1  AAA
     on-accent #0C0E36 on accent    #8DAAFF   8.24:1  AAA

   Light
     ink       #0C0E36 on page    #E1EBF0   15.32:1  AAA
     ink       #0C0E36 on surface #FFFFFF   18.56:1  AAA
     muted     #4A5684 on page    #E1EBF0    5.87:1  AA
     muted     #4A5684 on surface #FFFFFF    7.11:1  AAA
     accent    #2B55BD on page    #E1EBF0    5.53:1  AA   (links)
     accent    #2B55BD on surface #FFFFFF    6.69:1  AA
     on-accent #FFFFFF on accent  #2B55BD    6.69:1  AA

   Chartreuse #D2EA1C on ice #E1EBF0 is 1.12:1. It is not used for text or for the light rule.
*/

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #070A22;
  --atmosphere: linear-gradient(180deg, #1F1D47 0%, #070A22 100%);
  --surface: #191A47;
  --ink: #F2F6FA;
  --muted: #A9B4D8;
  --line: rgba(225, 235, 240, 0.35);
  --accent: #8DAAFF;
  --on-accent: #0C0E36;
  --rule: #D2EA1C;
  --radius: 20px;
  --measure: 40rem;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #E1EBF0;
    --atmosphere: linear-gradient(180deg, #E1EBF0 0%, #E1EBF0 100%);
    --surface: #FFFFFF;
    --ink: #0C0E36;
    --muted: #4A5684;
    --line: rgba(12, 14, 54, 0.22);
    --accent: #2B55BD;
    --on-accent: #FFFFFF;
    --rule: #2B55BD;
  }
}

html {
  background-color: var(--background);
  background-image: var(--atmosphere);
  background-attachment: fixed;
}

body {
  background: transparent;
}

h1 {
  font-weight: 700;
}

.tagline {
  margin: 0.15rem 0 0.9rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mark {
  margin: 0 0 0.9rem;
}

.mark img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.catalog {
  list-style: none;
  padding: 0;
  margin: 0;
}

.catalog li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 0.15rem;
  margin-bottom: 0.75rem;
}

.catalog p,
.notice {
  color: var(--muted);
}