:root {
  /* ==========================================================================
     Unusual Lotus - Word Toolbox Design Tokens
     Inherits and harmonizes with the main Unusual Lotus CSS system
     ========================================================================== */

  /* Main Site Palette Integration */
  --primary: var(--clr-primary, #597dbf);
  --primary-hover: #6e91cb;
  --primary-light: rgba(89, 125, 191, 0.18);
  --primary-contrast: #ffffff;

  --accent: var(--pod-accent, #c84ad3);
  --accent-hover: #d965e6;
  --accent-light: rgba(200, 74, 211, 0.18);

  --highlight: var(--pod-primary, #f7961d);
  --highlight-hover: #fca83a;
  --highlight-light: rgba(247, 150, 29, 0.18);

  --secondary: var(--clr-secondary, #697488);
  --tertiary: var(--clr-tertiary, #364b71);
  --quadiary: var(--clr-quadiary, #91a1bd);
  --quintiary: var(--clr-quintiary, #1c293d);

  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.18);
  --warning: var(--pod-primary, #f7961d);
  --warning-light: rgba(247, 150, 29, 0.18);
  --danger: var(--pod-secondary, #ef476f);
  --danger-light: rgba(239, 71, 111, 0.18);

  /* Backgrounds (Dark Glassmorphism default matching Unusual Lotus) */
  --bg-body: var(--clr-background, #000000);
  --bg-surface: rgba(255, 255, 255, 0.07);
  --bg-surface-elevated: rgba(255, 255, 255, 0.12);
  --bg-subtle: rgba(255, 255, 255, 0.04);
  --bg-muted: rgba(255, 255, 255, 0.08);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.20);
  --border-focus: var(--clr-primary, #597dbf);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-inverse: #000000;

  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-text: rgba(255, 255, 255, 0.85);

  /* Typography */
  --font-sans: var(--primary-font, futura-pt, sans-serif);
  --font-script: var(--secondary-font, sarah-script, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --font-size-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.25rem);

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(89, 125, 191, 0.35);
  --shadow-accent-glow: 0 0 20px rgba(200, 74, 211, 0.35);

  /* Layout Dimensions */
  --max-content-width: 920px;
  --subnav-height: 52px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}