/* Material 3 system tokens (non-colour): typography, shape, elevation, motion, state.
   Values follow https://m3.material.io/foundations — colour roles live in color-tokens.css. */
:root {
  /* Typefaces */
  /* Devanagari / Japanese fallbacks so mixed-script text always gets a matching font. */
  --md-ref-typeface-brand: "Roboto Flex", Roboto, "Noto Sans Devanagari", "Nirmala UI", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-ref-typeface-plain: "Roboto Flex", Roboto, "Noto Sans Devanagari", "Nirmala UI", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bh-typeface-deva: "Noto Sans Devanagari", "Nirmala UI", Mangal, "Kohinoor Devanagari", sans-serif;
  --bh-typeface-jp: "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;

  /* Type scale: font / line-height / weight / tracking */
  --md-sys-typescale-display-large: 400 57px/64px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium: 400 45px/52px var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small: 400 36px/44px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large: 400 32px/40px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 400 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large: 400 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain);

  /* Shape scale */
  --md-sys-shape-corner-none: 0;
  --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;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation (shadow colour from the scheme's shadow role) */
  --_sh: color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
  --_sa: color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 var(--_sh), 0 1px 3px 1px var(--_sa);
  --md-sys-elevation-level2: 0 1px 2px 0 var(--_sh), 0 2px 6px 2px var(--_sa);
  --md-sys-elevation-level3: 0 1px 3px 0 var(--_sh), 0 4px 8px 3px var(--_sa);
  --md-sys-elevation-level4: 0 2px 3px 0 var(--_sh), 0 6px 10px 4px var(--_sa);
  --md-sys-elevation-level5: 0 4px 4px 0 var(--_sh), 0 8px 12px 6px var(--_sa);

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long2: 500ms;

  /* State layer opacities */
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.10;
  --md-sys-state-pressed-state-layer-opacity: 0.10;
  --md-sys-state-dragged-state-layer-opacity: 0.16;

  /* Word-mapping colours (Mango-style colour links between target, Devanagari and English).
     Hues harmonised to sit beside the scheme; tone 40 on light surfaces. */
  --bh-word-1: #0b57d0;
  --bh-word-2: #a8326d;
  --bh-word-3: #146c2e;
  --bh-word-4: #8d4f00;
  --bh-word-5: #6a3ea1;
  --bh-word-6: #006a6a;
}
:root[data-theme="dark"] {
  --bh-word-1: #a8c7fa; --bh-word-2: #ffb0cf; --bh-word-3: #8fd89a;
  --bh-word-4: #ffb871; --bh-word-5: #d4bbff; --bh-word-6: #80d5d4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bh-word-1: #a8c7fa; --bh-word-2: #ffb0cf; --bh-word-3: #8fd89a;
    --bh-word-4: #ffb871; --bh-word-5: #d4bbff; --bh-word-6: #80d5d4;
  }
}

/* Typescale utility classes */
.md-display-large { font: var(--md-sys-typescale-display-large); letter-spacing: -0.25px; }
.md-display-medium { font: var(--md-sys-typescale-display-medium); }
.md-display-small { font: var(--md-sys-typescale-display-small); }
.md-headline-large { font: var(--md-sys-typescale-headline-large); }
.md-headline-medium { font: var(--md-sys-typescale-headline-medium); }
.md-headline-small { font: var(--md-sys-typescale-headline-small); }
.md-title-large { font: var(--md-sys-typescale-title-large); }
.md-title-medium { font: var(--md-sys-typescale-title-medium); letter-spacing: 0.15px; }
.md-title-small { font: var(--md-sys-typescale-title-small); letter-spacing: 0.1px; }
.md-body-large { font: var(--md-sys-typescale-body-large); letter-spacing: 0.5px; }
.md-body-medium { font: var(--md-sys-typescale-body-medium); letter-spacing: 0.25px; }
.md-body-small { font: var(--md-sys-typescale-body-small); letter-spacing: 0.4px; }
.md-label-large { font: var(--md-sys-typescale-label-large); letter-spacing: 0.1px; }
.md-label-medium { font: var(--md-sys-typescale-label-medium); letter-spacing: 0.5px; }
.md-label-small { font: var(--md-sys-typescale-label-small); letter-spacing: 0.5px; }