/* App-level semantic tokens; themes restyle them under [data-theme] scopes.
   No light-dark() in html-level declarations — postcss-preset-mantine
   rewrites it into a descendant selector that never matches <html>. Use
   explicit [data-mantine-color-scheme] blocks. */

:root {
  /* accolades */
  --flxn-gold: gold;
  --flxn-silver: var(--mantine-color-gray-5);
  --flxn-bronze: var(--mantine-color-orange-6);

  /* toast icons */
  --flxn-toast-success: lightgreen;
  --flxn-toast-error: lightcoral;

  /* surfaces & decoration */
  --flxn-overlay: rgba(0, 0, 0, 0.4);
  --flxn-dotgrid-color: var(--mantine-color-default-border);
  --flxn-pop-shadow: rgba(0, 0, 0, 0.3);
  --flxn-avatar-radius: 50%;
  --flxn-avatar-border: 1px solid var(--mantine-color-default-border);
  --flxn-badge-radius: 12px;

  /* text on accent fills: black/white from the cascaded fill (oklch block
     below overrides this fallback) */
  --flxn-on-accent: var(--mantine-primary-color-contrast);

  /* light-scheme values */
  --flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white));
  --flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3));
  --flxn-podium-1-label: var(--mantine-color-yellow-8);
  --flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white));
  --flxn-podium-2-border: var(--mantine-color-gray-4);
  --flxn-podium-2-label: var(--mantine-color-gray-6);
  --flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white));
  --flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3));
  --flxn-podium-3-label: var(--mantine-color-orange-8);
  --flxn-showcase-bg: var(--mantine-color-white);
}

:root[data-mantine-color-scheme="dark"] {
  --flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6));
  --flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4));
  --flxn-podium-1-label: var(--mantine-color-yellow-4);
  --flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6));
  --flxn-podium-2-border: var(--mantine-color-dark-4);
  --flxn-podium-2-label: var(--mantine-color-gray-4);
  --flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6));
  --flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4));
  --flxn-podium-3-label: var(--mantine-color-orange-4);
  --flxn-showcase-bg: var(--mantine-color-dark-7);
}

@supports (color: oklch(from red calc(1 - 1) 0 h)) {
  :root {
    --flxn-on-accent: oklch(
      from var(--mantine-primary-color-filled) calc((0.6 - l) * infinity) 0 h
    );
  }
}