/**
 * UI Interaction System V3 — canonical shared interaction tokens.
 * Visual language established by V1 (focus) + V2 (hover). This file is tokens only.
 * Rules live in interaction.css (loaded after theme).
 */

:root {
  /* Transitions (interaction only) */
  --ui-transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
  --ui-transition-colors: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  --ui-transition-quiet: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;

  /* Focus */
  --ui-focus-accent: #a855f7;
  --ui-focus-border: rgba(168, 85, 247, 0.55);
  --ui-focus-soft: rgba(168, 85, 247, 0.12);
  --ui-focus-glow: 0 0 0 1px rgba(168, 85, 247, 0.16), 0 0 10px rgba(168, 85, 247, 0.1);
  --ui-focus-glow-quiet: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 8px rgba(168, 85, 247, 0.14);
  --ui-focus-glow-cta: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 18px rgba(0, 212, 255, 0.22), 0 0 28px rgba(168, 85, 247, 0.28);
  --ui-focus-nav-border: rgba(0, 212, 255, 0.6);
  --ui-focus-nav-bg: rgba(20, 8, 40, 0.95);
  --ui-focus-nav-glow:
    0 0 0 1px rgba(160, 32, 240, 0.45),
    0 0 18px rgba(160, 32, 240, 0.55),
    0 0 34px rgba(0, 212, 255, 0.28);
  --ui-focus-danger-border: rgba(255, 77, 94, 0.45);
  --ui-focus-danger-bg: rgba(255, 77, 94, 0.12);
  --ui-focus-danger-glow: 0 0 0 2px rgba(255, 77, 94, 0.35);
  --ui-focus-link-outline: 2px solid rgba(168, 85, 247, 0.65);
  --ui-focus-link-offset: 2px;

  /* Hover */
  --ui-hover-border: rgba(168, 85, 247, 0.4);
  --ui-hover-soft: rgba(168, 85, 247, 0.06);
  --ui-hover-glow: 0 0 8px rgba(168, 85, 247, 0.1);
  --ui-hover-cta-filter: brightness(1.06);
  --ui-hover-cta-glow: 0 0 22px rgba(0, 212, 255, 0.3), 0 0 36px rgba(168, 85, 247, 0.36);
  --ui-hover-cta-lift: translateY(-1px);
  --ui-hover-nav-border: rgba(0, 212, 255, 0.6);
  --ui-hover-nav-bg: rgba(20, 8, 40, 0.95);
  --ui-hover-nav-glow:
    0 0 0 1px rgba(160, 32, 240, 0.45),
    0 0 18px rgba(160, 32, 240, 0.55),
    0 0 34px rgba(0, 212, 255, 0.28);
  --ui-hover-card-border: rgba(168, 85, 247, 0.4);
  --ui-hover-card-glow: var(--ui-hover-glow);
  --ui-hover-form-border: rgba(168, 85, 247, 0.35);
  --ui-hover-form-glow: 0 0 6px rgba(168, 85, 247, 0.08);
  --ui-hover-quiet-bg: rgba(168, 85, 247, 0.1);
  --ui-hover-quiet-border: rgba(168, 85, 247, 0.35);
  --ui-hover-danger-bg: rgba(255, 77, 94, 0.12);
  --ui-hover-danger-border: rgba(255, 77, 94, 0.35);
  --ui-hover-danger-color: #ffb4bb;

  /* Selected / active (shared) */
  --ui-selected-glow: 0 0 0 1px rgba(168, 85, 247, 0.14), 0 0 12px rgba(168, 85, 247, 0.18);

  /* Dock surface defaults (Create may override opaque fills) */
  --ui-dock-bg: var(--surface, #111111);
  --ui-dock-hover-bg: #140828;
  --ui-dock-on-bg: #1c1228;
  --ui-dock-on-hover-bg: #221530;

  /* Compatibility aliases — prefer --ui-* in new rules */
  --cv2-glow-focus: var(--ui-focus-glow);
  --cv2-glow-hover: var(--ui-hover-glow);
  --cv2-glow-selected: var(--ui-selected-glow);
  --cab-glow-focus: var(--ui-focus-glow);
  --cab-glow-hover: var(--ui-hover-glow);
  --cab-accent-border: var(--ui-focus-border);
  --ideas-glow-focus: var(--ui-focus-glow);
  --ideas-glow-hover: var(--ui-hover-glow);
  --home-glow-focus: var(--ui-focus-glow);
  --home-glow-hover: var(--ui-hover-glow);
}

html[data-theme="light"] {
  --ui-focus-accent: #8a2be2;
  --ui-focus-border: rgba(138, 43, 226, 0.45);
  --ui-focus-soft: rgba(138, 43, 226, 0.1);
  --ui-focus-glow: 0 0 0 1px rgba(138, 43, 226, 0.16), 0 0 10px rgba(138, 43, 226, 0.08);
  --ui-focus-glow-quiet: 0 0 0 1px rgba(138, 43, 226, 0.22), 0 0 8px rgba(138, 43, 226, 0.12);
  --ui-focus-glow-cta: 0 0 0 1px rgba(138, 43, 226, 0.22), 0 0 16px rgba(0, 168, 212, 0.18), 0 0 24px rgba(138, 43, 226, 0.24);
  --ui-focus-nav-border: rgba(138, 43, 226, 0.35);
  --ui-focus-nav-bg: #ede5ff;
  --ui-focus-nav-glow:
    0 0 0 1px rgba(138, 43, 226, 0.25),
    0 0 14px rgba(138, 43, 226, 0.3),
    0 0 24px rgba(0, 168, 212, 0.15);
  --ui-focus-link-outline: 2px solid rgba(138, 43, 226, 0.55);

  --ui-hover-border: rgba(138, 43, 226, 0.35);
  --ui-hover-soft: rgba(138, 43, 226, 0.06);
  --ui-hover-glow: 0 0 8px rgba(138, 43, 226, 0.1);
  --ui-hover-nav-border: rgba(138, 43, 226, 0.35);
  --ui-hover-nav-bg: #ede5ff;
  --ui-hover-nav-glow:
    0 0 0 1px rgba(138, 43, 226, 0.25),
    0 0 14px rgba(138, 43, 226, 0.3),
    0 0 24px rgba(0, 168, 212, 0.15);
  --ui-hover-card-border: rgba(138, 43, 226, 0.35);
  --ui-hover-form-border: rgba(138, 43, 226, 0.3);
  --ui-hover-form-glow: 0 0 6px rgba(138, 43, 226, 0.08);
  --ui-hover-quiet-bg: rgba(138, 43, 226, 0.08);
  --ui-hover-quiet-border: rgba(138, 43, 226, 0.3);

  --ui-selected-glow: 0 0 0 1px rgba(138, 43, 226, 0.14), 0 0 12px rgba(138, 43, 226, 0.14);
  --ui-dock-bg: var(--elev, #fff);
  --ui-dock-hover-bg: #ede5ff;
  --ui-dock-on-bg: var(--chip-on, #ede5ff);
  --ui-dock-on-hover-bg: var(--chip-on, #ede5ff);
}

/* Create page opaque dock surfaces (same recipe, surface-specific fills) */
html.create-v2-page {
  --ui-dock-bg: var(--surface, #111111);
  --ui-dock-hover-bg: #1a1024;
  --ui-dock-on-bg: #1c1228;
  --ui-dock-on-hover-bg: #221530;
}

html[data-theme="light"].create-v2-page {
  --ui-dock-bg: var(--elev, #fff);
  --ui-dock-hover-bg: #ede5ff;
  --ui-dock-on-bg: var(--chip-on, #ede5ff);
  --ui-dock-on-hover-bg: var(--chip-on, #ede5ff);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-hover-cta-lift: none;
  }
}