/**
 * Agent shell — design system imports + semantic aliases
 * All agent tokens map to css/designs/* variables only.
 */
@import url('designs/variables.css');
@import url('designs/spacing.css');
@import url('designs/typography.css');
@import url('designs/colors.css');
@import url('designs/borders.css');
@import url('designs/sizes.css');
@import url('designs/shadows.css');
@import url('designs/transitions.css');
@import url('designs/z-index.css');
@import url('designs/misc.css');

:root {
  /* Page canvas — neutral light grey from design system */
  --agent-canvas-bg: var(--color-gray-50);

  /* Sidebar & header rail — brand section gradient */
  --agent-rail-bg: linear-gradient(
    180deg,
    var(--gradient-section-top) 0%,
    var(--gradient-section-mid) 50%,
    var(--gradient-section-bottom) 100%
  );
  --agent-rail-border: color-mix(in srgb, var(--color-white) 12%, transparent);
  --agent-rail-surface: color-mix(in srgb, var(--color-white) 6%, transparent);
  --agent-rail-text: var(--color-white);
  --agent-rail-text-muted: color-mix(in srgb, var(--color-white) 65%, transparent);

  /* Welcome / header hero — dark space band (Bonton-style) */
  --agent-header-hero-bg-image: url('../images/agent-header-hero-bg.svg');
  --agent-header-hero-overlay: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gradient-section-top) 72%, transparent) 0%,
    color-mix(in srgb, var(--color-info) 38%, transparent) 55%,
    color-mix(in srgb, var(--gradient-section-bottom) 85%, transparent) 100%
  );
  --agent-welcome-bg-image: url('../images/agent-dashboard-hero-bg.svg');
  --agent-welcome-overlay: linear-gradient(
    105deg,
    color-mix(in srgb, var(--gradient-section-top) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-info) 72%, transparent) 48%,
    color-mix(in srgb, var(--color-info) 28%, transparent) 100%
  );
  --agent-hero-text: var(--color-white);
  --agent-hero-chip-bg: color-mix(in srgb, var(--color-white) 16%, transparent);
  --agent-hero-chip-border: color-mix(in srgb, var(--color-white) 28%, transparent);

  /* Primary actions */
  --agent-cta-dashboard-bg: var(--gradient-blue);
  --agent-cta-dashboard-solid: var(--color-info);
  --agent-cta-dashboard-hover: var(--color-info-dark);
  --agent-cta-bookings-bg: var(--gradient-orange);
  --agent-cta-bookings-solid: var(--color-primary-primary);
  --agent-cta-bookings-hover: var(--gradient-orange-start);
  --agent-menu-active-bg: var(--gradient-blue);
  --agent-menu-active-solid: var(--color-info);

  /* Surfaces */
  --agent-surface: var(--color-bg-primary);
  --agent-surface-border: var(--border-color-light);
  --agent-header-bg: var(--agent-canvas-bg);
  --agent-header-text: var(--color-text-primary);
  --agent-header-hero-text: var(--color-white);
  --agent-wallet-body-bg: var(--color-bg-primary);

  /* Dashboard search engine — brand section gradient */
  --agent-search-panel-bg: linear-gradient(
    180deg,
    var(--gradient-section-top) 0%,
    var(--gradient-section-mid) 52%,
    var(--gradient-section-bottom) 100%
  );
  --agent-search-panel-surface: var(--color-bg-primary);
}