:root {
  /* Brand colors */
  --neoncyan: #2AFFF7;
  --neonteal: #00FFD4;
  --trinkateal: #00FFD4; /* alias for neonteal */
  --trinka-text: #ACABBB;
  --trinkagrey-dark: #202029;
  --trinkagrey-light: #444444;
  --darkknow: #161621;

  /* Radii */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 24px;

  /* Shadows */
  --glow-cyan-soft: 0 0 12px rgba(42,255,247,0.25);
  --glow-cyan-strong: 0 0 26px rgba(42,255,247,0.6);

  /* Z-index tiers (arena bands) */
  --z-a1-base: 0;
  --z-a1-foreground: 1050;
  --z-a2-story: 2050;
  --z-a3-hud: 3050;
  --z-a3-dialog: 3200;
  --z-a3-overlay: 3350;
  --z-a4-coordinator: 4050;
  --z-a5-hud: 5050;
  --z-a5-modal: 5400;
  --z-a5-takeover: 5900;
  --z-portal-utility: 5260;

  /* Motion */
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --ease-smooth: cubic-bezier(.22,.61,.36,1);

  /* A5 sizing tokens derived from ixu (default ixu fallback = 60px) */
  /* --ixu is written by the ixu provider on :root; these tokens provide centralized sizes for A5 UI */
  --a5-ixu: var(--ixu, 60px);
  --a5-small: calc(var(--a5-ixu) * 0.75); /* small control multiplier */
  --a5-regular: calc(var(--a5-ixu) * 1); /* base control size */
  --a5-large: calc(var(--a5-ixu) * 1.5); /* large controls */

  /* Main menu sizes */
  --a5-main-collapsed-w: calc(var(--a5-regular) * 0.8); /* collapsed width as ixu */
  --a5-main-collapsed-h: calc(var(--a5-regular) * 8); /* collapsed height in ixu units */
  --a5-main-expanded-w: calc(var(--a5-regular) * 8); /* expanded width in ixu */
  --a5-main-expanded-h: calc(var(--a5-regular) * 10.5); /* expanded height in ixu */

  /* Drawer sizes */
  --a5-drawer-w: calc(var(--a5-regular) * 5.5);

  /* Avatar & user area sizes */
  --a5-avatar-s: calc(var(--a5-regular) * 0.8);
  --a5-avatar-s-large: calc(var(--a5-regular) * 1.1);
  /* Navigation menu specific tokens */
  --a5-nav-collapsed-w: var(--a5-main-collapsed-w); /* collapsed width in px (ixu-derived) */
  --a5-nav-collapsed-h: var(--a5-main-collapsed-h); /* collapsed height in px (ixu-derived) */
  --a5-nav-expanded-w: var(--a5-main-expanded-w);
  --a5-nav-expanded-h: var(--a5-main-expanded-h);
  --a5-nav-gap-v: calc(var(--a5-small) * 0.6);
  --a5-nav-gap-h: calc(var(--a5-small) * 0.8);
  /* Effects menu sizing tokens */
  --a5-effects-collapsed-w: calc(var(--a5-regular) * 0.9);
  --a5-effects-collapsed-h: calc(var(--a5-regular) * 4.8);
  --a5-effects-story-collapsed-w: calc(var(--a5-regular) * 0.7);
  --a5-effects-story-collapsed-h: calc(var(--a5-regular) * 2.4);
  --a5-effects-expanded-w: calc(var(--a5-regular) * 6);
  --a5-effects-expanded-h: calc(var(--a5-regular) * 7.5);
  --a5-effects-max-w: calc(var(--a5-ixu) * 9);
  --a5-effects-min-w: calc(var(--a5-ixu) * 4.5);
  --a5-effects-padding-v: calc(var(--a5-small) * 0.6);
  --a5-effects-padding-h: calc(var(--a5-small) * 0.7);
  --a5-effects-gap: calc(var(--a5-small) * 0.35);
  /* Drawer sizes */
  --a5-drawer-w-min: calc(var(--a5-regular) * 4.5);
  --a5-drawer-w-max: calc(var(--a5-regular) * 6);
  --a5-drawer-lower-offset: calc(var(--a5-regular) * 3); /* used where '18vh' was previously used */
  /* Constellation / gallery tokens */
  --a5-gallery-hero-h: calc(var(--a5-ixu) * 8.4); /* ~70vh -> 8.4 * ixu (ixu ~= vh/12) */
  --a5-gallery-minpage-h: calc(var(--a5-ixu) * 18); /* ~150vh -> 18 * ixu */
}