/**
 * Base Tokens
 */

:root {
  --r-amethyst-400: #4925cb; /** For enabled state of links (visited) in lightmode */
  --r-amethyst-500: #39277a; /** For hovered and activated state of links (visited) in lightmode */
  --r-azure-400: #014bb3; /** For enabled state of links (not visited) in lightmode */
  --r-azure-500: #24346f; /** For hovered and activated state of links (not visited) in lightmode */
  --r-blue-100: #f8fafb; /** Used for (lightmode) status-info-soft */
  --r-blue-400: #3e5c73; /** Used for (lightmode) status-info-regular */
  --r-charcoal-200: #c9c9c9;
  --r-charcoal-300: #686868;
  --r-charcoal-400: #282828;
  --r-charcoal-400-alpha-04: rgba(40, 40, 40, 0.04); /** Used for (lightmode) background-state-hovered */
  --r-charcoal-400-alpha-08: rgba(40, 40, 40, 0.08); /** Used for (lightmode) background-state-selected */
  --r-charcoal-400-alpha-12: rgba(40, 40, 40, 0.12); /** Used for (lightmode) background-state-activated */
  --r-charcoal-500: #141414;
  --r-charcoal-600: #000000;
  --r-charcoal-600-alpha-14: rgba(0, 0, 0, 0.14); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-16: rgba(0, 0, 0, 0.16); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-24: rgba(0, 0, 0, 0.24); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-48: rgba(0, 0, 0, 0.48); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-64: rgba(0, 0, 0, 0.64); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-80: rgba(0, 0, 0, 0.8); /** Used for (darkmode) background-overlay */
  --r-dark-amethyst-100: #e6d4ff; /** For hovered and activated state of links (visited) in darkmode */
  --r-dark-amethyst-200: #d0a8ff; /** For enabled state of links (visited) in darkmode */
  --r-dark-azure-100: #d6e6ff; /** For hovered and activated state of links (not visited) in darkmode */
  --r-dark-azure-200: #a8c9ff; /** For enabled state of links (not visited) in darkmode */
  --r-dark-blue-100: #afc3d4; /** Used for (darkmode) status-info-regular */
  --r-dark-blue-500: #222528; /** Used for (darkmode) status-info-soft */
  --r-dark-green-100: #80ce88; /** Used for (darkmode) status-success-regular */
  --r-dark-green-500: #212b22; /** Used for (darkmode) status-success-soft */
  --r-dark-orange-100: #ffb557; /** Used for (darkmode) status-warning-regular */
  --r-dark-orange-500: #31281c; /** Used for (darkmode) status-warning-soft */
  --r-dark-red-100: #ff969c; /** Used for (darkmode) status-error-regular */
  --r-dark-red-500: #190606; /** Used for (darkmode) status-error-soft */
  --r-dark-vanguard-100: #6da258;
  --r-dark-vanguard-200: #587d4a;
  --r-dark-vanguard-300: #3d4d36;
  --r-dark-vanguard-400: #323a2f;
  --r-deepvanguard-100: #eff1ee;
  --r-deepvanguard-200: #d2d6cf;
  --r-deepvanguard-300: #a5ada0;
  --r-deepvanguard-400: #788370;
  --r-deepvanguard-500: #4b5a41;
  --r-deepvanguard-600: #1e3111;
  --r-ember-400: #ef706b;
  --r-focused-400: #0071e3; /** Used for focused outline in both lightmode and darkmode */
  --r-green-100: #f7fdf8; /** Used for (lightmode) status-success-soft */
  --r-green-400: #298535; /** Used for (lightmode) status-success-regular */
  --r-haze-200: #f3f1f0;
  --r-haze-200-alpha-04: rgba(243, 241, 240, 0.04); /** Used for (darkmode) background-state-hovered */
  --r-haze-200-alpha-08: rgba(243, 241, 240, 0.08); /** Used for (darkmode) background-state-selected */
  --r-haze-200-alpha-12: rgba(243, 241, 240, 0.12); /** Used for (darkmode) background-state-activated */
  --r-haze-300: #ece9e8;
  --r-haze-400: #e7e4e2;
  --r-haze-500: #d4d1cf;
  --r-haze-600: #bfbdbb;
  --r-mist-200: #f7f7f7;
  --r-mist-200-alpha-04: rgba(247, 247, 247, 0.04);
  --r-mist-200-alpha-08: rgba(247, 247, 247, 0.08);
  --r-mist-200-alpha-12: rgba(247, 247, 247, 0.12);
  --r-mist-300: #f0f0f0;
  --r-mist-400: #e5e5e5;
  --r-mist-500: #d1d1d1;
  --r-mist-600: #bdbdbd;
  --r-neutral-white: #ffffff;
  --r-orange-100: #fef9f5; /** Used for (lightmode) status-warning-soft */
  --r-orange-400: #ff7429; /** Used for (lightmode) status-warning-regular */
  --r-red-100: #fef6f6; /** Used for (lightmode) status-error-soft */
  --r-red-400: #b00c15; /** Used for (lightmode) status-error-regular */
  --r-vanguard-100: #e5ebe3;
  --r-vanguard-200: #cbd7c6;
  --r-vanguard-300: #86a27b;
  --r-vanguard-400: #527a42;
  --r-vanguard-500: #456637;
  --r-vanguard-600: #37522c;
  --r-icon-size-l: 2rem;
  --r-icon-size-m: 1.5rem;
  --r-icon-size-s: 1rem;
  --r-font-family-heading: "GT Ultra Median", Skeena, ui-serif, serif;
  --r-font-family-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r-font-size-desktop-200: 0.8125rem;
  --r-font-size-desktop-300: 0.875rem;
  --r-font-size-desktop-400: 1rem;
  --r-font-size-desktop-500: 1.375rem;
  --r-font-size-desktop-600: 1.75rem;
  --r-font-size-desktop-700: 2.25rem;
  --r-font-size-desktop-800: 2.875rem;
  --r-font-size-desktop-900: 3.5rem;
  --r-font-size-mobile-200: 0.8125rem;
  --r-font-size-mobile-300: 0.875rem;
  --r-font-size-mobile-400: 1rem;
  --r-font-size-mobile-500: 1.25rem;
  --r-font-size-mobile-600: 1.5rem;
  --r-font-size-mobile-700: 1.75rem;
  --r-font-size-mobile-800: 1.875rem;
  --r-font-size-mobile-900: 2.625rem;
  --r-font-weight-light: 300;
  --r-font-weight-regular: 400;
  --r-font-weight-semibold: 600;
  --r-line-height-l: 1.7;
  --r-line-height-m: 1.5;
  --r-line-height-s: 1.2;
  --r-line-height-xs: 1.1;
  --r-border-radius-0: 0rem;
  --r-border-radius-12: 0.75rem;
  --r-border-radius-16: 1rem;
  --r-border-radius-2: 0.125rem;
  --r-border-radius-4: 0.25rem;
  --r-border-radius-8: 0.5rem;
  --r-border-radius-999: 62.4375rem;
  --r-elevation-default-blur: 0rem;
  --r-elevation-default-spread: 0rem;
  --r-elevation-default-x: 0rem;
  --r-elevation-default-y: 0rem;
  --r-elevation-floating-blur: 1.5rem;
  --r-elevation-floating-spread: 0rem;
  --r-elevation-floating-x: 0rem;
  --r-elevation-floating-y: 0.25rem;
  --r-elevation-overlay-blur: 3rem;
  --r-elevation-overlay-spread: 0rem;
  --r-elevation-overlay-x: 0rem;
  --r-elevation-overlay-y: 0.375rem;
  --r-elevation-raised-blur: 0.75rem;
  --r-elevation-raised-spread: 0rem;
  --r-elevation-raised-x: 0rem;
  --r-elevation-raised-y: 0.125rem;
  --r-spacing-025: 0.25rem;
  --r-spacing-050: 0.5rem;
  --r-spacing-075: 0.75rem;
  --r-spacing-100: 1rem;
  --r-spacing-125: 1.25rem;
  --r-spacing-150: 1.5rem;
  --r-spacing-175: 1.75rem;
  --r-spacing-200: 2rem;
  --r-spacing-225: 2.25rem;
  --r-spacing-250: 2.5rem;
  --r-spacing-275: 2.75rem;
  --r-spacing-300: 3rem;
  --r-spacing-350: 3.5rem;
  --r-spacing-400: 4rem;
  --r-spacing-450: 4.5rem;
  --r-spacing-500: 5rem;
}

/**
 * Semantic Color Tokens
 */

:root {
  --r-background-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: light-dark(var(--r-vanguard-100), var(--r-dark-vanguard-400)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-interactive-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-interactive-soft: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-12)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for specific sections that require attention */
  --r-background-overlay: light-dark(var(--r-charcoal-600-alpha-48), var(--r-charcoal-600-alpha-80)); /** Used as an overlay background for components that behave modal */
  --r-background-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: light-dark(var(--r-haze-400), var(--r-charcoal-600)); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: light-dark(var(--r-haze-200), var(--r-charcoal-500)); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: light-dark(var(--r-charcoal-400-alpha-12), var(--r-haze-200-alpha-12)); /** Used for activated state in all interactive components */
  --r-background-state-activated-inverse: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-12)); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-hovered: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-04)); /** Used for hovered state in all interactive components */
  --r-background-state-hovered-inverse: light-dark(var(--r-haze-200-alpha-04), var(--r-charcoal-400-alpha-04)); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-selected: light-dark(var(--r-charcoal-400-alpha-08), var(--r-haze-200-alpha-08)); /** Used for selected state in all interactive components */
  --r-border-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for borders that serve decoration and function, adding color */
  --r-border-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for smoother borders but still clearly visible */
  --r-border-softer: light-dark(var(--r-charcoal-200), var(--r-charcoal-300)); /** Used for making distinctions between sections */
  --r-border-softest: light-dark(var(--r-haze-400), var(--r-charcoal-200)); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: light-dark(var(--r-charcoal-600), var(--r-neutral-white)); /** Used for clear, distinct borders */
  --r-elevation-default: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-floating: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-overlay: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-raised: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-icon-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used to add emphasis on one single icon */
  --r-icon-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used to add emphasis on one single icon */
  --r-icon-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for icons that are used on inverse backgrounds */
  --r-icon-inverse-static: var(--r-neutral-white); /** Used for icons that are used on inverse backgrounds, static in darkmode */
  --r-icon-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: light-dark(var(--r-azure-500), var(--r-dark-azure-100)); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: light-dark(var(--r-azure-400), var(--r-dark-azure-200)); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: light-dark(var(--r-amethyst-500), var(--r-dark-amethyst-100)); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: light-dark(var(--r-amethyst-400), var(--r-dark-amethyst-200)); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: light-dark(var(--r-haze-400), var(--r-charcoal-400)); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: light-dark(var(--r-charcoal-400), var(--r-haze-400)); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: light-dark(var(--r-red-400), var(--r-dark-red-100)); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: light-dark(var(--r-red-100), var(--r-dark-red-500)); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: light-dark(var(--r-blue-400), var(--r-dark-blue-100)); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: light-dark(var(--r-blue-100), var(--r-dark-blue-500)); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: light-dark(var(--r-green-400), var(--r-dark-green-100)); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: light-dark(var(--r-green-100), var(--r-dark-green-500)); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: light-dark(var(--r-orange-400), var(--r-dark-orange-100)); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: light-dark(var(--r-orange-100), var(--r-dark-orange-500)); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: light-dark(var(--r-charcoal-600), var(--r-neutral-white)); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
}

/**
 * Semantic Color Tokens - Inverse
 */

[data-theme="inverse"] {
  --r-background-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-background-brand-softest: light-dark(var(--r-dark-vanguard-400), var(--r-vanguard-100));
  --r-background-interactive-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-interactive-soft: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-04));
  --r-background-inverse: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-overlay: light-dark(var(--r-charcoal-600-alpha-80), var(--r-charcoal-600-alpha-48));
  --r-background-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-soft: light-dark(var(--r-charcoal-600), var(--r-haze-400));
  --r-background-softer: light-dark(var(--r-charcoal-500), var(--r-haze-200));
  --r-background-softest: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-background-state-activated: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-12));
  --r-background-state-activated-inverse: light-dark(var(--r-charcoal-400-alpha-12), var(--r-haze-200-alpha-12));
  --r-background-state-hovered: light-dark(var(--r-haze-200-alpha-04), var(--r-charcoal-400-alpha-04));
  --r-background-state-hovered-inverse: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-04));
  --r-background-state-selected: light-dark(var(--r-haze-200-alpha-08), var(--r-charcoal-400-alpha-08));
  --r-border-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-border-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-border-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-border-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-border-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-border-softer: light-dark(var(--r-charcoal-300), var(--r-charcoal-200));
  --r-border-softest: light-dark(var(--r-charcoal-200), var(--r-haze-400));
  --r-border-strong: light-dark(var(--r-neutral-white), var(--r-charcoal-600));
  --r-elevation-default: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-floating: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-overlay: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-raised: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-icon-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-icon-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-icon-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-icon-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-icon-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-link-emphasis: light-dark(var(--r-dark-azure-100), var(--r-azure-500));
  --r-link-enabled: light-dark(var(--r-dark-azure-200), var(--r-azure-400));
  --r-link-visited-emphasis: light-dark(var(--r-dark-amethyst-100), var(--r-amethyst-500));
  --r-link-visited-enabled: light-dark(var(--r-dark-amethyst-200), var(--r-amethyst-400));
  --r-logo-brand-inverse: light-dark(var(--r-charcoal-400), var(--r-haze-400));
  --r-logo-brand-regular: light-dark(var(--r-haze-400), var(--r-charcoal-400));
  --r-status-error-regular: light-dark(var(--r-dark-red-100), var(--r-red-400));
  --r-status-error-soft: light-dark(var(--r-dark-red-500), var(--r-red-100));
  --r-status-info-regular: light-dark(var(--r-dark-blue-100), var(--r-blue-400));
  --r-status-info-soft: light-dark(var(--r-dark-blue-500), var(--r-blue-100));
  --r-status-success-regular: light-dark(var(--r-dark-green-100), var(--r-green-400));
  --r-status-success-soft: light-dark(var(--r-dark-green-500), var(--r-green-100));
  --r-status-warning-regular: light-dark(var(--r-dark-orange-100), var(--r-orange-400));
  --r-status-warning-soft: light-dark(var(--r-dark-orange-500), var(--r-orange-100));
  --r-text-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-text-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-text-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-text-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-text-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-text-strong: light-dark(var(--r-neutral-white), var(--r-charcoal-600));
  --r-shadow-default: var(--r-elevation-default-x) var(--r-elevation-default-y) var(--r-elevation-default-blur) var(--r-elevation-default-spread) var(--r-elevation-default);
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}

/**
 * Semantic Tokens (non-color)
 */

:root {
  --r-radius-full: var(--r-border-radius-999);
  --r-radius-l: var(--r-border-radius-0);
  --r-radius-m: var(--r-border-radius-0);
  --r-radius-none: var(--r-border-radius-0);
  --r-radius-s: var(--r-border-radius-0);
  --r-radius-xl: var(--r-border-radius-0);
  --r-radius-xs: var(--r-border-radius-0);
}

/**
 * Alta UI Color Tokens
 */

[data-r-ui="alta"] {
  --r-background-interactive-regular: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-background-interactive-soft: light-dark(var(--r-deepvanguard-100), var(--r-mist-200-alpha-12));
  --r-background-inverse: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-background-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-background-soft: light-dark(var(--r-mist-400), var(--r-charcoal-600));
  --r-background-softer: light-dark(var(--r-mist-200), var(--r-charcoal-500));
  --r-background-state-activated: light-dark(var(--r-charcoal-400-alpha-12), var(--r-mist-200-alpha-12));
  --r-background-state-hovered: light-dark(var(--r-charcoal-400-alpha-04), var(--r-mist-200-alpha-04));
  --r-background-state-selected: light-dark(var(--r-charcoal-400-alpha-08), var(--r-mist-200-alpha-08));
  --r-border-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-border-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-border-softest: light-dark(var(--r-mist-400), var(--r-charcoal-200));
  --r-icon-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-icon-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-logo-brand-inverse: light-dark(var(--r-mist-400), var(--r-charcoal-400));
  --r-logo-brand-regular: light-dark(var(--r-charcoal-400), var(--r-mist-400));
  --r-text-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-text-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
}

/**
 * Alta UI Elevation Tokens
 */

[data-r-ui="alta"] {
  --r-elevation-floating: light-dark(var(--r-charcoal-600-alpha-16), var(--r-charcoal-600-alpha-64));
  --r-elevation-overlay: light-dark(var(--r-charcoal-600-alpha-24), var(--r-charcoal-600-alpha-80));
  --r-elevation-raised: light-dark(var(--r-charcoal-600-alpha-14), var(--r-charcoal-600-alpha-24));
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}

/**
 * Alta UI Radius Tokens
 */

[data-r-ui="alta"] {
  --r-radius-l: var(--r-border-radius-12);
  --r-radius-m: var(--r-border-radius-8);
  --r-radius-s: var(--r-border-radius-4);
  --r-radius-xl: var(--r-border-radius-16);
  --r-radius-xs: var(--r-border-radius-2);
}

/**
 * Composed Elevation Shadows
 * 
 * One ready-to-use box-shadow per level. Geometry comes from the base elevation tokens, colour
 * from that level's own semantic elevation colour token -- transparent in default UI and real
 * under [data-r-ui="alta"], so shadows are an Alta-only effect with no per-component branching.
 * CSS-only on purpose: the var() chain must resolve at runtime for that override to apply.
 */

:root {
  --r-shadow-default: var(--r-elevation-default-x) var(--r-elevation-default-y) var(--r-elevation-default-blur) var(--r-elevation-default-spread) var(--r-elevation-default);
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}
/**
 * Mode axis: color-scheme only. Token values follow via `light-dark()` at the semantic layer,
 * not via duplicated per-mode blocks. No `data-theme` attribute defaults to light; `auto` sets
 * both keywords so the browser resolves `light-dark()` from the platform preference -- no
 * `prefers-color-scheme` media query needed here.
 */
:root {
  color-scheme: light;
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="auto"] {
  color-scheme: light dark;
}