/**
 * @file
 * VVJ Core — design token bridge.
 *
 * Exposes APEX `--apex-*` and `--r-*` tokens to all VVJ components,
 * with system-color-keyword fallbacks for non-APEX sites. Pattern
 * modules consume these `--vvj-*` aliases instead of reaching for
 * APEX tokens directly — that way a non-APEX site still gets a
 * coherent default palette without needing APEX installed.
 *
 * Filename:     vvj-tokens.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */

:root {
  /* Surface colors. */
  --vvj-bg:                 var(--r-background, Canvas);
  --vvj-text:               var(--r-text, CanvasText);
  --vvj-heading:            var(--r-heading, var(--r-text, CanvasText));
  --vvj-link:               var(--r-link, Highlight);
  --vvj-link-hover:         var(--r-link-hover, var(--r-link, Highlight));
  --vvj-border:             var(--r-border, color-mix(in srgb, currentColor 15%, transparent));
  --vvj-hover-bg:           var(--r-menu-background-hover, color-mix(in srgb, currentColor 8%, transparent));

  /* Focus ring. */
  --vvj-focus-color:        var(--apex-focus-ring-color, var(--vvj-link));
  --vvj-focus-width:        var(--apex-focus-ring-width, 2px);
  --vvj-focus-offset:       var(--apex-focus-ring-offset, 2px);

  /* Typography. */
  --vvj-font:               var(--apex-font-system, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --vvj-font-bold:          var(--apex-font-semibold, 600);

  /* Spacing + surface treatment. */
  --vvj-radius:             var(--apex-radius-md, 0.25rem);
  --vvj-gap:                var(--apex-grid-gap, 1rem);
  --vvj-pad:                var(--apex-component-padding, 1rem);
  --vvj-pad-sm:             var(--apex-space-2xs, 0.5rem);
  --vvj-pad-xs:             var(--apex-space-xs, 0.875rem);

  /* Motion. */
  --vvj-transition-speed:   0.3s;
  --vvj-transition-easing:  ease-in-out;
}