/* 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 {
  /* bottom-nav indicator travel: spring (stiffness 320, damping 30) */
  --flxn-nav-travel: linear(0, 0.0102, 0.0376, 0.0778, 0.1272, 0.1829, 0.2422, 0.3033, 0.3646, 0.4247, 0.4829, 0.5383, 0.5906, 0.6393, 0.6843, 0.7256, 0.7631, 0.7969, 0.8273, 0.8543, 0.8783, 0.8993, 0.9176, 0.9335, 0.9472, 0.9589, 0.9688, 0.9772, 0.9841, 0.9898, 0.9945, 0.9982, 1.0011, 1.0034, 1.0051, 1.0063, 1.0072, 1.0077, 1.0079, 1.0079, 1.0078);
  --flxn-nav-travel-ms: 333ms;

  /* 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
    );
  }
}