/* @bug-on/m3-tokens — MD3 System Color Tokens */
/* MD3 Expressive System Color Tokens — Light Theme (Baseline Scheme)
 *
 * Spec: Material 3 Expressive 2025 (SpecVersion '2025')
 * Mapping: PaletteTokens → ColorLightTokens → CSS variable
 * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
 *
 * Static fallback for SSR / no-JS environments.
 * At runtime, MD3ThemeProvider overrides all --md-sys-color-* via
 * element.style.setProperty() using the dynamic color engine (theme-utils.ts).
 */
:root {
	/* ── Primary ─────────────────────────────────────────────────────────── */
	--md-sys-color-primary: #6750a4; /* Primary40  */
	--md-sys-color-on-primary: #ffffff; /* Primary100 */
	--md-sys-color-primary-container: #eaddff; /* Primary90  */
	--md-sys-color-on-primary-container: #21005d; /* Primary10  */
	--md-sys-color-inverse-primary: #d0bcff; /* Primary80  */

	/* ── Primary Fixed (stable across light/dark) ────────────────────────── */
	--md-sys-color-primary-fixed: #eaddff; /* Primary90 */
	--md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
	--md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
	--md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */

	/* ── Secondary ───────────────────────────────────────────────────────── */
	--md-sys-color-secondary: #625b71; /* Secondary40  */
	--md-sys-color-on-secondary: #ffffff; /* Secondary100 */
	--md-sys-color-secondary-container: #e8def8; /* Secondary90  */
	--md-sys-color-on-secondary-container: #1d192b; /* Secondary10  */

	/* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
	--md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
	--md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
	--md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
	--md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */

	/* ── Tertiary ────────────────────────────────────────────────────────── */
	--md-sys-color-tertiary: #7d5260; /* Tertiary40  */
	--md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
	--md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90  */
	--md-sys-color-on-tertiary-container: #31111d; /* Tertiary10  */

	/* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
	--md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
	--md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
	--md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
	--md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */

	/* ── Error ───────────────────────────────────────────────────────────── */
	--md-sys-color-error: #b3261e; /* Error40  */
	--md-sys-color-on-error: #ffffff; /* Error100 */
	--md-sys-color-error-container: #f9dedc; /* Error90  */
	--md-sys-color-on-error-container: #410e0b; /* Error10  */

	/* ── Surface ─────────────────────────────────────────────────────────── */
	--md-sys-color-surface: #fef7ff; /* Neutral98 */
	--md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
	--md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
	--md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
	--md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
	--md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
	--md-sys-color-surface-tint: #6750a4; /* = primary */
	--md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
	--md-sys-color-surface-container-low: #f7f2fa; /* Neutral96  */
	--md-sys-color-surface-container: #f3edf7; /* Neutral94  */
	--md-sys-color-surface-container-high: #ece6f0; /* Neutral92  */
	--md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90  */

	/* ── Inverse Surface ─────────────────────────────────────────────────── */
	--md-sys-color-inverse-surface: #313033; /* Neutral20 */
	--md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */

	/* ── Background ──────────────────────────────────────────────────────── */
	--md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
	--md-sys-color-on-background: #1c1b1f; /* Neutral10  */

	/* ── Outline ─────────────────────────────────────────────────────────── */
	--md-sys-color-outline: #79747e; /* NeutralVariant50 */
	--md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */

	/* ── Utility ─────────────────────────────────────────────────────────── */
	--md-sys-color-scrim: #000000; /* Neutral0 */
	--md-sys-color-shadow: #000000; /* Neutral0 */

	/* ── Indicator tokens — Loading & Progress ───────────────────────────── */
	--md-sys-color-indicator-active: var(--md-sys-color-primary);
	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
	--md-sys-color-indicator-contained-active: var(
		--md-sys-color-on-primary-container
	);
	--md-sys-color-indicator-contained-container: var(
		--md-sys-color-primary-container
	);
	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
}

/* Dark Theme overrides
 * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
 */
[data-theme="dark"],
.dark {
	/* ── Primary ─────────────────────────────────────────────────────────── */
	--md-sys-color-primary: #d0bcff; /* Primary80  */
	--md-sys-color-on-primary: #381e72; /* Primary20  */
	--md-sys-color-primary-container: #4f378b; /* Primary30  */
	--md-sys-color-on-primary-container: #eaddff; /* Primary90  */
	--md-sys-color-inverse-primary: #6750a4; /* Primary40  */

	/* ── Secondary ───────────────────────────────────────────────────────── */
	--md-sys-color-secondary: #ccc2dc; /* Secondary80  */
	--md-sys-color-on-secondary: #332d41; /* Secondary20  */
	--md-sys-color-secondary-container: #4a4458; /* Secondary30  */
	--md-sys-color-on-secondary-container: #e8def8; /* Secondary90  */

	/* ── Tertiary ────────────────────────────────────────────────────────── */
	--md-sys-color-tertiary: #efb8c8; /* Tertiary80  */
	--md-sys-color-on-tertiary: #492532; /* Tertiary20  */
	--md-sys-color-tertiary-container: #633b48; /* Tertiary30  */
	--md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90  */

	/* ── Error ───────────────────────────────────────────────────────────── */
	--md-sys-color-error: #f2b8b5; /* Error80  */
	--md-sys-color-on-error: #601410; /* Error20  */
	--md-sys-color-error-container: #8c1d18; /* Error30  */
	--md-sys-color-on-error-container: #f9dedc; /* Error90  */

	/* ── Surface ─────────────────────────────────────────────────────────── */
	--md-sys-color-surface: #141218; /* Neutral6   */
	--md-sys-color-on-surface: #e6e1e5; /* Neutral90  */
	--md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
	--md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
	--md-sys-color-surface-dim: #141218; /* Neutral6  */
	--md-sys-color-surface-bright: #3b383e; /* Neutral24 */
	--md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
	--md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4   */
	--md-sys-color-surface-container-low: #1d1b20; /* Neutral10  */
	--md-sys-color-surface-container: #211f26; /* Neutral12  */
	--md-sys-color-surface-container-high: #2b2930; /* Neutral17  */
	--md-sys-color-surface-container-highest: #36343b; /* Neutral22  */

	/* ── Inverse Surface ─────────────────────────────────────────────────── */
	--md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
	--md-sys-color-inverse-on-surface: #313033; /* Neutral20 */

	/* ── Background ──────────────────────────────────────────────────────── */
	--md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
	--md-sys-color-on-background: #e6e1e5; /* Neutral90 */

	/* ── Outline ─────────────────────────────────────────────────────────── */
	--md-sys-color-outline: #938f99; /* NeutralVariant60 */
	--md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */

	/* ── Utility ─────────────────────────────────────────────────────────── */
	--md-sys-color-scrim: #000000;
	--md-sys-color-shadow: #000000;

	/* ── Indicator tokens — Dark ─────────────────────────────────────────── */
	--md-sys-color-indicator-active: var(--md-sys-color-primary);
	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
	--md-sys-color-indicator-contained-active: var(
		--md-sys-color-on-primary-container
	);
	--md-sys-color-indicator-contained-container: var(
		--md-sys-color-primary-container
	);
	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
}

:root {
	/* ── MD3 Expressive Corner Radius Scale (10 levels) ─────────────────────── */
	/* Source: https://m3.material.io/styles/shape/corner-radius-scale           */

	--md-sys-shape-corner-none: 0px;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 8px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	/* New in M3 Expressive (May 2025) */
	--md-sys-shape-corner-large-increased: 20px;
	--md-sys-shape-corner-extra-large: 28px;
	/* New in M3 Expressive (May 2025) */
	--md-sys-shape-corner-extra-large-increased: 32px;
	/* New in M3 Expressive (May 2025) */
	--md-sys-shape-corner-extra-extra-large: 48px;
	--md-sys-shape-corner-full: 9999px;
}


/* @bug-on/m3-expressive — Component Base Reset & Source Scan Configuration */
@source "./**/*.{js,mjs}";
/* @bug-on/m3-expressive - Base Reset Styles */

/**
 * Hide default browser UI elements that conflict with MD3 custom UI.
 * - Hide search clear/decoration buttons in WebKit/Blink (Chrome, Safari, Edge).
 * - Hide IE/Edge specific clear and reveal (password) buttons.
 */

/* Hide default search clear button and related decorations */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

/* Hide IE/Edge clear and reveal (password toggle) buttons */
input::-ms-clear,
input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}


/* @bug-on/m3-expressive — Tailwind v4 Theme Registration */
/* Registers MD3 tokens as Tailwind utilities. No manual @theme mapping needed. */
@theme {
  /* ── Colors: Primary ── */
  --color-m3-primary: var(--md-sys-color-primary);
  --color-m3-on-primary: var(--md-sys-color-on-primary);
  --color-m3-primary-container: var(--md-sys-color-primary-container);
  --color-m3-on-primary-container: var(--md-sys-color-on-primary-container);
  --color-m3-primary-fixed: var(--md-sys-color-primary-fixed);
  --color-m3-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
  --color-m3-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
  --color-m3-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant);

  /* ── Colors: Secondary ── */
  --color-m3-secondary: var(--md-sys-color-secondary);
  --color-m3-on-secondary: var(--md-sys-color-on-secondary);
  --color-m3-secondary-container: var(--md-sys-color-secondary-container);
  --color-m3-on-secondary-container: var(--md-sys-color-on-secondary-container);
  --color-m3-secondary-fixed: var(--md-sys-color-secondary-fixed);
  --color-m3-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
  --color-m3-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
  --color-m3-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant);

  /* ── Colors: Tertiary ── */
  --color-m3-tertiary: var(--md-sys-color-tertiary);
  --color-m3-on-tertiary: var(--md-sys-color-on-tertiary);
  --color-m3-tertiary-container: var(--md-sys-color-tertiary-container);
  --color-m3-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
  --color-m3-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
  --color-m3-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
  --color-m3-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
  --color-m3-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant);

  /* ── Colors: Error ── */
  --color-m3-error: var(--md-sys-color-error);
  --color-m3-on-error: var(--md-sys-color-on-error);
  --color-m3-error-container: var(--md-sys-color-error-container);
  --color-m3-on-error-container: var(--md-sys-color-on-error-container);

  /* ── Colors: Surface ── */
  --color-m3-surface: var(--md-sys-color-surface);
  --color-m3-surface-dim: var(--md-sys-color-surface-dim);
  --color-m3-surface-bright: var(--md-sys-color-surface-bright);
  --color-m3-on-surface: var(--md-sys-color-on-surface);
  --color-m3-surface-variant: var(--md-sys-color-surface-variant);
  --color-m3-on-surface-variant: var(--md-sys-color-on-surface-variant);
  --color-m3-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
  --color-m3-surface-container-low: var(--md-sys-color-surface-container-low);
  --color-m3-surface-container: var(--md-sys-color-surface-container);
  --color-m3-surface-container-high: var(--md-sys-color-surface-container-high);
  --color-m3-surface-container-highest: var(--md-sys-color-surface-container-highest);

  /* ── Colors: Inverse ── */
  --color-m3-inverse-surface: var(--md-sys-color-inverse-surface);
  --color-m3-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
  --color-m3-inverse-primary: var(--md-sys-color-inverse-primary);

  /* ── Colors: Outline / Shadow / Scrim ── */
  --color-m3-outline: var(--md-sys-color-outline);
  --color-m3-outline-variant: var(--md-sys-color-outline-variant);
  --color-m3-shadow: var(--md-sys-color-shadow);
  --color-m3-scrim: var(--md-sys-color-scrim);
  --color-m3-surface-tint: var(--md-sys-color-surface-tint);

  /* ── Colors: Background ── */
  --color-m3-background: var(--md-sys-color-background);
  --color-m3-on-background: var(--md-sys-color-on-background);

  /* ── Colors: Navigation Indicator ── */
  --color-m3-indicator-active: var(--md-sys-color-indicator-active);
  --color-m3-indicator-container: var(--md-sys-color-indicator-container);
  --color-m3-indicator-contained-active: var(--md-sys-color-indicator-contained-active);
  --color-m3-indicator-contained-container: var(--md-sys-color-indicator-contained-container);
  --color-m3-indicator-track: var(--md-sys-color-indicator-track);
  --color-m3-indicator-stop: var(--md-sys-color-indicator-stop);

  /* ── Shape: Corner Radius Scale (10 levels, M3 Expressive) ── */
  --radius-m3-none: var(--md-sys-shape-corner-none, 0px);
  --radius-m3-xs: var(--md-sys-shape-corner-extra-small, 4px);
  --radius-m3-sm: var(--md-sys-shape-corner-small, 8px);
  --radius-m3-md: var(--md-sys-shape-corner-medium, 12px);
  --radius-m3-lg: var(--md-sys-shape-corner-large, 16px);
  --radius-m3-lg-inc: var(--md-sys-shape-corner-large-increased, 20px);
  --radius-m3-xl: var(--md-sys-shape-corner-extra-large, 28px);
  --radius-m3-xl-inc: var(--md-sys-shape-corner-extra-large-increased, 32px);
  --radius-m3-xxl: var(--md-sys-shape-corner-extra-extra-large, 48px);
  --radius-m3-full: var(--md-sys-shape-corner-full, 9999px);

  /* ── Typography Scale & Family ── */
  --font-md3-expressive: "Google Sans Flex", system-ui, sans-serif;

  /* ── Motion Easing ── */
  --ease-m3-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-m3-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-m3-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-m3-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-m3-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-m3-standard-decelerate: cubic-bezier(0, 0, 0, 1);
}