:root {
    --roe-echo-void: #0a0b14;
    --roe-realm-indigo: #261d40;
    --roe-rift-violet: #7554d8;
    --roe-echo-cyan: #67ddeb;
    --roe-ancient-gold: #d8aa55;
    --roe-moonbone: #f0e9d6;
    --roe-charred-oak: #17100c;
    --roe-charred-oak-deep: #0d0907;
    --roe-black-iron: #080706;
    --roe-aged-bronze: #704c25;
    --roe-aged-bronze-bright: #b2864b;
    --roe-aged-bronze-muted: #9f8e70;
    --roe-aged-parchment: #d8c394;
    --roe-parchment-ink: #2a2117;
    --roe-rift-navy: #071d2b;
    --roe-rift-blue: #075f88;
    --roe-rift-blue-bright: #0f91bd;
    --roe-signal-jade: #086a36;
    --roe-signal-jade-bright: #12b85b;
    --roe-warning-red: #8f2118;
    --roe-warning-red-bright: #cf3c2a;
    --roe-quest-signal-gold: #ffdf62;
    --roe-quest-signal-gray: #a6a6a6;
    --roe-quest-signal-aura-gold: #ffd75f;
    --roe-quest-signal-aura-gray: #858585;
    --roe-quest-signal-outline: #251404;

    --roe-display: Palatino, 'Palatino Linotype', Georgia, serif;
    --roe-ui: 'Avenir Next', Avenir, Inter, Arial, sans-serif;
    --roe-background: #0a0b14;
    --roe-surface: #171425;
    --roe-surface-raised: #211b34;
    --roe-surface-deep: #0d0e18;
    --roe-primary: #d8aa55;
    --roe-secondary: #f0e9d6;
    --roe-accent: #67ddeb;
    --roe-accent-two: #7554d8;
    --roe-ash: #8e92a3;
    --roe-text-muted: #aaa6b7;
    --roe-text-dim: #77798b;
    --roe-line: #2b2d42;
    --roe-chat-general: #d6b978;
    --roe-chat-party: #83b6d9;
    --roe-chat-guild: #8fc78a;
    --roe-chat-whisper: #c69ad9;
    --roe-chat-system: #e0c27c;
    --roe-chat-failure: #c77868;

    --roe-hud-frame-surface: var(--roe-charred-oak);
    --roe-hud-frame-deep: var(--roe-charred-oak-deep);
    --roe-hud-frame-edge: var(--roe-aged-bronze);
    --roe-hud-frame-highlight: var(--roe-aged-bronze-bright);
    --roe-hud-well-surface: var(--roe-black-iron);
    --roe-hud-chat-log-surface: color-mix(in srgb, var(--roe-charred-oak) 92%, var(--roe-aged-bronze));
    --roe-hud-chat-composer-surface: color-mix(in srgb, var(--roe-charred-oak) 86%, var(--roe-aged-bronze));
    --roe-hud-chat-composer-edge: color-mix(in srgb, var(--roe-aged-bronze) 68%, var(--roe-black-iron));
    --roe-hud-chat-composer-ink: var(--roe-moonbone);
    --roe-hud-chat-composer-placeholder: var(--roe-aged-bronze-muted);
    --roe-hud-text: var(--roe-moonbone);
    --roe-hud-text-muted: var(--roe-aged-bronze-muted);
    --roe-hud-field-surface: var(--roe-aged-parchment);
    --roe-hud-field-ink: var(--roe-parchment-ink);
    --roe-hud-action-surface: var(--roe-signal-jade);
    --roe-hud-action-active: var(--roe-signal-jade-bright);
    --roe-hud-focus: var(--roe-echo-cyan);
    --roe-hud-title-surface: var(--roe-rift-navy);
    --roe-hud-title-active: var(--roe-rift-blue);
    --roe-hud-neutral-action: var(--roe-rift-blue);
    --roe-hud-neutral-action-active: var(--roe-rift-blue-bright);
    --roe-hud-danger: var(--roe-warning-red);
    --roe-hud-danger-active: var(--roe-warning-red-bright);
    --roe-hud-footer-surface: var(--roe-charred-oak-deep);
    --roe-hud-slot-surface: color-mix(in srgb, var(--roe-charred-oak) 72%, var(--roe-black-iron));
    --roe-hud-slot-edge: color-mix(in srgb, var(--roe-aged-bronze) 70%, var(--roe-black-iron));
    --roe-hud-portrait-ring-surface: var(--roe-charred-oak);
    --roe-hud-portrait-ring-edge: color-mix(in srgb, var(--roe-aged-bronze) 74%, var(--roe-black-iron));
    --roe-hud-portrait-ring-groove: color-mix(in srgb, var(--roe-charred-oak) 74%, var(--roe-black-iron));
    --roe-hud-portrait-ring-highlight: color-mix(in srgb, var(--roe-aged-bronze-bright) 38%, transparent);
    --roe-hud-drag-source: var(--roe-aged-bronze-bright);
    --roe-hud-drop-target: var(--roe-signal-jade-bright);
    --roe-hud-scroll-thumb: color-mix(in srgb, var(--roe-aged-bronze-bright) 62%, var(--roe-black-iron));
    --roe-hud-health: var(--roe-warning-red-bright);
    --roe-hud-health-wounded: var(--roe-ancient-gold);
    --roe-hud-mana: var(--roe-rift-blue-bright);
    --roe-hud-experience: var(--roe-rift-violet);
    --roe-hud-cast: var(--roe-echo-cyan);
    --roe-hud-currency: var(--roe-ancient-gold);
    --roe-hud-reward-heading-ink: color-mix(in srgb, var(--roe-parchment-ink) 68%, var(--roe-aged-bronze));
    --roe-hud-success: var(--roe-signal-jade-bright);
    --roe-hud-warning: var(--roe-ancient-gold);
    --roe-hud-error: var(--roe-warning-red-bright);
    --roe-hud-quest-signal-available: var(--roe-quest-signal-gold);
    --roe-hud-quest-signal-active: var(--roe-quest-signal-gray);
    --roe-hud-quest-signal-ready: var(--roe-quest-signal-gold);
    --roe-hud-quest-signal-aura-available: var(--roe-quest-signal-aura-gold);
    --roe-hud-quest-signal-aura-active: var(--roe-quest-signal-aura-gray);
    --roe-hud-quest-signal-aura-ready: var(--roe-quest-signal-aura-gold);
    --roe-hud-quest-signal-outline: var(--roe-quest-signal-outline);
    --roe-hud-map-surface: color-mix(in srgb, var(--roe-aged-parchment) 72%, var(--roe-signal-jade));
    --roe-hud-modal-dim: color-mix(in srgb, var(--roe-black-iron) 58%, transparent);
    --roe-google-button-surface: #ffffff;
    --roe-google-button-hover: #f8faff;
    --roe-google-button-active: #eef2f8;
    --roe-google-button-edge: #747775;
    --roe-google-button-ink: #1f1f1f;
    --roe-google-button-disabled: #f2f2f2;
    --roe-google-dark-button-surface: #131314;
    --roe-google-dark-button-edge: #8e918f;
    --roe-google-dark-button-ink: #e3e3e3;
    --roe-google-logo-surface: #ffffff;
    --roe-google-button-logo-gap: 10px;

    --roe-space-1: 4px;
    --roe-space-2: 8px;
    --roe-space-3: 12px;
    --roe-space-4: 16px;
    --roe-space-5: 20px;
    --roe-space-6: 24px;
    --roe-space-7: 32px;
    --roe-space-8: 40px;

    --roe-radius-sm: 6px;
    --roe-radius-xs: 3px;
    --roe-radius-md: 10px;
    --roe-radius-lg: 14px;
    --roe-radius-xl: 18px;
    --roe-radius-round: 999px;

    --roe-control-height: 44px;
    --roe-reading-dialog-width: 760px;
    --roe-quest-dialog-width: 540px;
    --roe-compact-preview-height: 152px;
    --roe-hud-title-height: 52px;
    --roe-hud-footer-height: 56px;
    --roe-hud-slot-size: 56px;
    --roe-hud-slot-gap: 4px;
    --roe-hud-unit-height: 130px;
    --roe-hud-unit-portrait-size: 126px;
    --roe-hud-player-frame-width: 344px;
    --roe-hud-level-badge-size: 32px;
    --roe-hud-target-focus-width: 344px;
    --roe-hud-target-plate-min-height: 64px;
    --roe-hud-target-effect-size: 34px;
    --roe-hud-target-effect-seam-y: 97px;
    --roe-hud-target-level-badge-bottom: 7px;
    --roe-hud-target-mobile-width: 286px;
    --roe-hud-target-mobile-height: 108px;
    --roe-hud-target-mobile-portrait-size: 104px;
    --roe-hud-target-mobile-plate-min-height: 56px;
    --roe-hud-target-mobile-effect-seam-y: 82px;
    --roe-hud-target-mobile-level-badge-bottom: 1px;
    --roe-hud-target-mobile-top: 142px;
    --roe-hud-minimap-zone-width: 132px;
    --roe-hud-minimap-zone-height: 24px;
    --roe-hud-minimap-control-face-inset: var(--roe-space-2);
    --roe-hud-minimap-control-glyph-size: 20px;
    --roe-hud-notice-compact-width: 360px;
    --roe-hud-notice-compact-min-height: 72px;
    --roe-hud-notice-compact-mark-size: 36px;
    --roe-hud-guidance-hint-max-width: 310px;
    --roe-hud-guidance-hint-min-height: var(--roe-control-height);
    --roe-hud-guidance-caption-ink: color-mix(in srgb, var(--roe-moonbone) 84%, var(--roe-ancient-gold));
    --roe-hud-guidance-caption-shadow: 0 1px 2px var(--roe-black-iron);
    --roe-hud-guidance-arrow-size: 68px;
    --roe-hud-guidance-arrow-shaft: var(--roe-ancient-gold);
    --roe-hud-guidance-arrow-head: color-mix(in srgb, var(--roe-moonbone) 42%, var(--roe-ancient-gold));
    --roe-hud-guidance-arrow-shine: color-mix(in srgb, var(--roe-moonbone) 82%, var(--roe-ancient-gold));
    --roe-hud-guidance-arrow-outline: var(--roe-charred-oak-deep);
    --roe-hud-guidance-arrow-aura: color-mix(in srgb, var(--roe-ancient-gold) 34%, transparent);
    --roe-hud-guidance-title-ink: color-mix(in srgb, var(--roe-moonbone) 54%, var(--roe-muted));
    --roe-hud-guidance-stack-gap: 10px;
    --roe-hud-guidance-window-clearance: var(--roe-space-4);
    --roe-hud-guidance-hotbar-clearance: 24px;
    --roe-hud-guidance-safe-inset: var(--roe-space-4);
    --roe-hud-guidance-z: 12100;
    --roe-hud-guidance-recovery-z: 12200;

    --roe-font-size-caption: 10px;
    --roe-font-size-label: 12px;
    --roe-font-size-body: 14px;
    --roe-font-size-body-large: 16px;
    --roe-font-size-heading: 30px;

    --roe-rift-gradient: linear-gradient(135deg, var(--roe-accent), var(--roe-accent-two));
    --roe-panel-gradient: linear-gradient(145deg, var(--roe-surface), var(--roe-background));
    --roe-gold-glow: 0 0 28px color-mix(in srgb, var(--roe-primary) 18%, transparent);
    --roe-focus-ring: 0 0 0 2px var(--roe-background), 0 0 0 4px var(--roe-accent);
    --roe-shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.34);
    --roe-shadow-dialog: 0 32px 96px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(240, 233, 214, 0.05) inset;
    --roe-shadow-hud-frame:
        0 0 0 1px rgba(0, 0, 0, 0.88),
        0 1px 0 rgba(240, 216, 168, 0.16) inset,
        0 0 0 4px rgba(8, 7, 6, 0.72) inset,
        0 12px 30px rgba(0, 0, 0, 0.54);
    --roe-shadow-hud-inset:
        0 1px 0 rgba(214, 173, 101, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.78) inset,
        0 2px 8px rgba(0, 0, 0, 0.64) inset;

    --roe-motion-fast: 160ms;
    --roe-motion-standard: 280ms;
    --roe-motion-deliberate: 520ms;
    --roe-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Realm minimap: a compact field instrument built from wood, brass and glass. */
    --roe-minimap-size: 184px;
    --roe-minimap-size-tablet: 132px;
    --roe-minimap-size-mobile: 112px;
    --roe-minimap-lens-inset: 20px;
    --roe-minimap-walnut-deep: #160c08;
    --roe-minimap-walnut: #3f2517;
    --roe-minimap-walnut-high: #765037;
    --roe-minimap-brass-deep: #51341e;
    --roe-minimap-brass: #9c7546;
    --roe-minimap-brass-high: #d5ad70;
    --roe-minimap-iron: #0b0a0a;
    --roe-minimap-cardinal-ink: #c8a77a;
    --roe-minimap-terrain-high: #8a9d51;
    --roe-minimap-terrain-mid: #617541;
    --roe-minimap-terrain-deep: #2f442f;
    --roe-minimap-glass-glint: rgba(255, 246, 207, 0.22);
    --roe-minimap-glass-shade: rgba(4, 8, 4, 0.34);
    --roe-minimap-player: #c5d95e;
    --roe-minimap-control: var(--roe-echo-cyan);
    --roe-minimap-control-muted: #806d54;
    --roe-minimap-shadow: 0 14px 28px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.72);
    --roe-minimap-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.54), 0 2px 4px rgba(0, 0, 0, 0.72);
    --roe-minimap-mobile-top: 152px;
    --roe-minimap-control-glyph-size: 18px;
}