/* Hey Footy theme. First Use brand tokens (fu-tokens v1.1.1, 2026-10-22) mapped onto
   Campfire's colour abstractions. Loads after base.css and colors.css, so the :root
   values here win. Keep ink text on cyan: white on cyan fails contrast. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/Poppins-Regular-6a79411d.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/Poppins-Medium-d4390ad4.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/Poppins-SemiBold-ea01e269.ttf") format("truetype"); }

:root {
  --font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* First Use palette as OKLCH triplets */
  --fu-cyan: 86.64% 0.104 204.7;
  --fu-charcoal: 27.41% 0.019 272;
  --fu-ink: 14.48% 0 0;
  --fu-night: 20.53% 0.051 257.4;
  --fu-deep: 55.74% 0.092 209.6;
  --fu-deep-text: 52.02% 0.085 209.9;
  --fu-pale: 94.84% 0.034 205.8;
  --fu-mist: 98.02% 0.012 203.5;
  --fu-paper: 100% 0 0;
  --fu-muted: 42.39% 0.027 244.3;
  --fu-rule: 87.27% 0.018 223.6;
  --fu-warning: 42.76% 0.102 46;
  --fu-night-surface: 26.04% 0.063 256.8;
  --fu-night-text: 96.48% 0.013 208.8;
  --fu-night-muted: 75.84% 0.031 237.1;
  --fu-night-rule: 36.42% 0.064 251.4;

  /* Campfire tokens, light */
  --lch-white: var(--fu-paper);
  --lch-black: var(--fu-ink);
  --lch-gray: var(--fu-mist);
  --lch-gray-dark: var(--fu-pale);
  --lch-gray-darker: var(--fu-rule);
  --lch-blue: var(--fu-deep-text);
  --lch-blue-light: var(--fu-pale);
  --lch-blue-dark: var(--fu-cyan);
  --lch-orange: var(--fu-warning);

  --color-page: oklch(var(--fu-mist));
  --color-brand: oklch(var(--fu-cyan));
  --color-brand-text: oklch(var(--fu-ink));

  @media (prefers-color-scheme: dark) {
    --lch-white: var(--fu-night);
    --lch-black: var(--fu-night-text);
    --lch-gray: var(--fu-night-surface);
    --lch-gray-dark: var(--fu-night-rule);
    --lch-gray-darker: 46% 0.055 250;
    --lch-blue: var(--fu-cyan);
    --lch-blue-light: 31% 0.06 252;
    --lch-blue-dark: 42% 0.08 230;

    --color-page: oklch(var(--fu-night));
  }
}

html, body {
  background-color: var(--color-page);
}

/* Surfaces stay paper on the mist page */
.panel, #main-content {
  background-color: oklch(var(--lch-white));
}

/* Primary action: ink on cyan, in both modes. Icons stay dark, never inverted. */
.btn--reversed {
  --btn-background: var(--color-brand);
  --btn-color: var(--color-brand-text);
  --hover-filter: brightness(0.92);

  img:not(.avatar) {
    filter: invert(0%);

    @media (prefers-color-scheme: dark) {
      filter: invert(0%);
    }
  }
}

/* Brand lockup on the sign-in page */
.hey-footy-lockup {
  display: block;
  inline-size: min(16em, 70vw);
  margin-inline: auto;
}

.hey-footy-lockup--reverse {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .hey-footy-lockup--light { display: none; }
  .hey-footy-lockup--reverse { display: block; }
}

.hey-footy-byline {
  color: oklch(var(--fu-muted));
  font-size: 0.75em;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  @media (prefers-color-scheme: dark) {
    color: oklch(var(--fu-night-muted));
  }
}

/* Footer mark: charcoal mark on light, white mark on dark */
#app-logo {
  filter: none;
  opacity: 0.8;

  img {
    inline-size: 2.6em;
    block-size: 2.6em;
  }

  .hey-footy-mark--dark { display: none; }

  @media (prefers-color-scheme: dark) {
    .hey-footy-mark--light { display: none; }
    .hey-footy-mark--dark { display: block; }
  }
}