/**
 * BanGUI Fluent UI custom theme.
 *
 * The primary brand colour ramp is built around #0F6CBD (a deep, professional blue).
 * This colour has a contrast ratio of ~5.4:1 against white, satisfying WCAG 2.1 AA
 * requirements for both text and large UI elements.
 *
 * Both `lightTheme` and `darkTheme` share the same brand ramp so all semantic
 * colour slots stay consistent when the user switches modes.
 */

import {
  createDarkTheme,
  createLightTheme,
  type BrandVariants,
  type Theme,
} from "@fluentui/react-components";

/**
 * BanGUI brand colour ramp — 16 stops from 10 (darkest) to 160 (lightest).
 *
 * Primary stop (80): #0F6CBD — contrast ratio ≈ 5.4:1 against white.
 */
const banGuiBrand: BrandVariants = {
  10: "#020D1A",
  20: "#041B32",
  30: "#072B50",
  40: "#0A3C6E",
  50: "#0C4E8A",
  60: "#0E5FA7",
  70: "#1169BA",
  80: "#0F6CBD" /* PRIMARY — passes WCAG AA */,
  90: "#2C81CC",
  100: "#4A96D8",
  110: "#6CADE3",
  120: "#91C5EC",
  130: "#B5D9F3",
  140: "#D2EAF8",
  150: "#E8F4FB",
  160: "#F3F9FD",
};

/** Light theme using the BanGUI brand palette. */
export const lightTheme: Theme = createLightTheme(banGuiBrand);

/** Dark theme using the BanGUI brand palette. */
export const darkTheme: Theme = createDarkTheme(banGuiBrand);