/*
 * Rubycon UI role tokens.
 * rubycon-* variables map Rubyvio brand primitives to builder UI roles.
 * Prefer changing UI visuals through these tokens instead of component-level overrides.
 */

:root {
  /* Rubycon App Shell */
  --rubycon-app-bg: var(--rvio-bg-main);
  --rubycon-app-text: var(--rvio-text-primary);
  --rubycon-app-text-muted: var(--rvio-text-muted);

  /* Rubycon Topbar */
  --rubycon-topbar-bg: rgba(8, 11, 18, 0.92);
  --rubycon-topbar-border: var(--rvio-border-default);
  --rubycon-topbar-text: var(--rvio-text-primary);
  --rubycon-topbar-height: 72px;

  /* Rubycon Sidebar / Panels */
  --rubycon-panel-bg: var(--rvio-surface);
  --rubycon-panel-bg-soft: var(--rvio-surface-soft);
  --rubycon-panel-bg-elevated: var(--rvio-surface-elevated);
  --rubycon-panel-border: var(--rvio-border-default);
  --rubycon-panel-radius: var(--rvio-radius-lg);
  --rubycon-panel-text: var(--rvio-text-primary);
  --rubycon-panel-text-muted: var(--rvio-text-muted);

  /* Rubycon Overlay / Modal Backdrop */
  --rubycon-overlay-bg: rgba(5, 6, 10, 0.86);
  --rubycon-overlay-bg-strong: rgba(5, 6, 10, 0.94);
  --rubycon-overlay-border: var(--rvio-border-default);
  --rubycon-overlay-blur: 18px;

  /* Rubycon Canvas */
  --rubycon-canvas-bg: #070A10;
  --rubycon-canvas-grid: rgba(255, 255, 255, 0.035);
  --rubycon-canvas-border: var(--rvio-border-subtle);

  /* Rubycon Controls */
  --rubycon-control-bg: rgba(255, 255, 255, 0.045);
  --rubycon-control-bg-hover: rgba(255, 255, 255, 0.075);
  --rubycon-control-border: var(--rvio-border-default);
  --rubycon-control-border-focus: var(--rvio-border-blue);
  --rubycon-control-text: var(--rvio-text-primary);
  --rubycon-control-placeholder: var(--rvio-text-disabled);
  --rubycon-control-radius: var(--rvio-radius-md);

  /* Rubycon Buttons */
  --rubycon-button-primary-bg: var(--rvio-gradient-primary);
  --rubycon-button-primary-text: var(--rvio-white);
  --rubycon-button-secondary-bg: rgba(255, 255, 255, 0.045);
  --rubycon-button-secondary-bg-hover: rgba(255, 255, 255, 0.075);
  --rubycon-button-secondary-text: var(--rvio-white);
  --rubycon-button-border: var(--rvio-border-default);
  --rubycon-button-radius: var(--rvio-button-radius);

  /* Rubycon Active / Selected States */
  --rubycon-active-bg: rgba(41, 130, 239, 0.12);
  --rubycon-active-bg-strong: rgba(41, 130, 239, 0.18);
  --rubycon-active-border: var(--rvio-border-blue);
  --rubycon-active-text: var(--rvio-white);
  --rubycon-selected-outline: #2982EF;
  --rubycon-selected-glow: 0 0 0 4px rgba(41, 130, 239, 0.14);

  /* Rubycon Notifications */
  --rubycon-success: #39D98A;
  --rubycon-warning: #F5B84B;
  --rubycon-danger: #FF5C7A;
  --rubycon-info: var(--rvio-blue-300);

  /* Rubycon Shadows */
  --rubycon-shadow-panel: var(--rvio-shadow-md);
  --rubycon-shadow-modal: var(--rvio-shadow-lg);
  --rubycon-glow-active: var(--rvio-glow-blue);

  /* Rubycon Motion */
  --rubycon-transition-fast: var(--rvio-duration-fast) var(--rvio-ease-standard);
  --rubycon-transition-default: var(--rvio-duration-default) var(--rvio-ease-standard);

}

body.wp-admin,
body[data-builder-window="main"],
#wpadminbar #wp-admin-bar-edit_with_bricks {
  /* Existing Bricks admin variable bridge */
  --bricks-transition: var(--rubycon-transition-default);
  --bricks-color-primary: var(--rvio-primary);
  --bricks-color-secondary: var(--rvio-accent);
  --bricks-text-dark: var(--rvio-text-primary);
  --bricks-text-medium: var(--rvio-text-secondary);
  --bricks-text-light: var(--rvio-text-muted);
  --bricks-text-info: var(--rubycon-info);
  --bricks-text-success: var(--rubycon-success);
  --bricks-text-warning: var(--rubycon-warning);
  --bricks-text-danger: var(--rubycon-danger);
  --bricks-bg-info: rgba(107, 168, 255, 0.14);
  --bricks-bg-success: rgba(57, 217, 138, 0.14);
  --bricks-bg-warning: rgba(245, 184, 75, 0.16);
  --bricks-bg-danger: rgba(255, 92, 122, 0.14);
  --bricks-bg-dark: var(--rvio-black-muted);
  --bricks-bg-light: var(--rubycon-panel-bg-soft);
  --bricks-border-color: var(--rubycon-panel-border);
  --bricks-border-radius: var(--rvio-radius-sm);
  --bricks-tooltip-bg: var(--rvio-white-soft);
  --bricks-tooltip-text: var(--rvio-black-soft);
}

body[data-builder-window="main"],
body[data-builder-window="iframe"],
.brx-body.iframe {
  /* Existing Bricks builder variable bridge */
  --builder-border-radius: var(--rubycon-control-radius);
  --builder-box-shadow: var(--rubycon-shadow-panel);
  --builder-toolbar-height: var(--rubycon-topbar-height);
  --builder-input-height: 34px;
  --builder-popup-input-height: 42px;
  --builder-spacing: var(--rvio-space-4);
  --builder-spacing-s: var(--rvio-space-2);
  --builder-font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --builder-placeholder-opacity: 0.72;

  --builder-gray-0: var(--rvio-black);
  --builder-gray-1: var(--rvio-black-soft);
  --builder-gray-2: var(--rvio-black-muted);
  --builder-gray-3: var(--rvio-surface);
  --builder-gray-4: var(--rvio-surface-soft);
  --builder-gray-5: var(--rvio-surface-elevated);
  --builder-gray-6: var(--rvio-gray-600);
  --builder-gray-7: var(--rvio-gray-400);
  --builder-gray-8: var(--rvio-gray-300);
  --builder-gray-9: var(--rvio-white-soft);

  --builder-bg: var(--rubycon-app-bg);
  --builder-bg-2: var(--rubycon-panel-bg);
  --builder-bg-3: var(--rubycon-panel-bg-soft);
  --builder-bg-4: var(--rubycon-panel-bg-elevated);
  --builder-color: var(--rubycon-app-text);
  --builder-color-description: var(--rubycon-app-text-muted);
  --builder-bg-accent: var(--rubycon-active-bg);
  --builder-color-accent: var(--rvio-primary);
  --builder-color-accent-inverse: var(--rvio-white);
  --builder-color-class: var(--rvio-blue-300);
  --builder-bg-class: rgba(41, 130, 239, 0.16);
  --builder-color-component: #A999FF;
  --builder-bg-component: rgba(66, 25, 164, 0.28);
  --builder-color-component-slot: #8BE8FF;
  --builder-bg-component-slot: rgba(29, 116, 196, 0.20);
  --builder-color-info: var(--rubycon-info);
  --builder-bg-info: rgba(107, 168, 255, 0.14);
  --builder-bg-highlight: var(--rubycon-active-bg-strong);
  --builder-color-highlight: var(--rubycon-selected-outline);
  --builder-bg-danger: rgba(255, 92, 122, 0.14);
  --builder-color-danger: var(--rubycon-danger);
  --builder-bg-success: rgba(57, 217, 138, 0.14);
  --builder-color-success: var(--rubycon-success);
  --builder-bg-muted: rgba(255, 255, 255, 0.055);
  --builder-color-muted: var(--rvio-gray-400);
  --builder-border-color: var(--rubycon-panel-border);
  --builder-color-knob: var(--rvio-blue-300);
  --builder-canvas-scrollbar-thumb_hover: var(--rvio-blue-300);
  --builder-canvas-scrollbar-thumb: rgba(107, 168, 255, 0.42);
  --builder-canvas-scrollbar-track: rgba(255, 255, 255, 0.06);
}