/* Global CSS variables required by @mynd/shared/theme.
 *
 * This file is intentionally served from `public/` (no Vite transform) to
 * prevent a flash of unstyled content on cold loads.
 *
 * Source-of-truth is `apps/mynd-web-v2/src/styles.css`.
 */

:root {
  /* Default brand colors (Mynd purple) */
  --brand-hue: 243;
  --brand-saturation: 94%;
  --brand-lightness: 67%;

  /* Brand color scale (50-900) */
  --brand-50: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) + 42%)
  );
  --brand-100: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) + 20%)
  );
  --brand-200: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) + 15%)
  );
  --brand-300: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) + 10%)
  );
  --brand-400: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) + 5%)
  );
  --brand-500: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
  --brand-600: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) - 5%)
  );
  --brand-700: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) - 10%)
  );
  --brand-800: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) - 15%)
  );
  --brand-900: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    calc(var(--brand-lightness) - 20%)
  );

  /* Default secondary colors */
  --secondary-hue: 358;
  --secondary-saturation: 100%;
  --secondary-lightness: 77%;

  /* Secondary color scale (50-900) */
  --secondary-50: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) + 25%)
  );
  --secondary-100: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) + 20%)
  );
  --secondary-200: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) + 15%)
  );
  --secondary-300: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) + 10%)
  );
  --secondary-400: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) + 5%)
  );
  --secondary-500: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    var(--secondary-lightness)
  );
  --secondary-600: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) - 5%)
  );
  --secondary-700: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) - 10%)
  );
  --secondary-800: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) - 15%)
  );
  --secondary-900: hsl(
    var(--secondary-hue),
    var(--secondary-saturation),
    calc(var(--secondary-lightness) - 20%)
  );

  /* Chakra UI compatibility - map brand colors to Chakra CSS variables */
  --chakra-colors-brand-50: var(--brand-50);
  --chakra-colors-brand-100: var(--brand-100);
  --chakra-colors-brand-200: var(--brand-200);
  --chakra-colors-brand-300: var(--brand-300);
  --chakra-colors-brand-400: var(--brand-400);
  --chakra-colors-brand-500: var(--brand-500);
  --chakra-colors-brand-600: var(--brand-600);
  --chakra-colors-brand-700: var(--brand-700);
  --chakra-colors-brand-800: var(--brand-800);
  --chakra-colors-brand-900: var(--brand-900);
}