@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

/**
 * DOME Chatbot Design Tokens
 * Version: 1.0.0
 *
 * This file must be loaded BEFORE the component for custom theming:
 * <link rel="stylesheet" href="https://cdn.example.com/dome-tokens.css">
 *
 * If not loaded, components will use default values (fallback).
 */

:root {
  /* ========== COLORS ========== */

  /* Primary - Main chatbot color (SparxWorks inspired) */
  --dome-color-primary: #0076f9; /* Sparx Vibrant Light Blue */
  --dome-color-primary-hover: #004fdb; /* Sparx Deep Brand Blue */
  --dome-color-primary-focus: #004fdb;
  --dome-color-primary-text: #ffffff;

  /* Neutral - Grayscale (Incorporates subtle blue-gray tones of SparxWorks) */
  --dome-color-neutral-50: #f8f8f8; /* Sparx Light Gray 3 */
  --dome-color-neutral-100: #f1f1f1; /* Sparx Light Gray 1 */
  --dome-color-neutral-200: #e6e6e6; /* Sparx Light Gray 2 */
  --dome-color-neutral-300: #d4dbe2; /* Muted gray with a hint of blue */
  --dome-color-neutral-400: #8cabc4; /* Sparx Gray Blue */
  --dome-color-neutral-500: #657e93;
  --dome-color-neutral-600: #4d4d4d; /* Sparx Icons Gray / Border */
  --dome-color-neutral-700: #3b4055;
  --dome-color-neutral-800: #27283d; /* Sparx Dark Blue Gray */
  --dome-color-neutral-900: #12131a;

  /* Semantic Colors */
  --dome-color-error: #ef4444;
  --dome-color-error-light: #fee2e2;
  --dome-color-success: #22c55e;
  --dome-color-success-light: #dcfce7;
  --dome-color-warning: #f59e0b;
  --dome-color-warning-light: #fef3c7;
  --dome-color-info: #0076f9; /* Sparx Light Blue */
  --dome-color-info-light: #e6f1fe;

  /* Background Colors */
  --dome-color-bg-primary: #ffffff;
  --dome-color-bg-secondary: #f8f8f8; /* Sparx Light Gray 3 */
  --dome-color-bg-tertiary: #f1f1f1; /* Sparx Light Gray 1 */

  /* ========== SPACING ========== */

  --dome-spacing-xs: 0.25rem; /* 4px */
  --dome-spacing-sm: 0.5rem; /* 8px */
  --dome-spacing-md: 1rem; /* 16px */
  --dome-spacing-lg: 1.5rem; /* 24px */
  --dome-spacing-xl: 2rem; /* 32px */
  --dome-spacing-2xl: 3rem; /* 48px */

  /* ========== TYPOGRAPHY ========== */

  /* Font Family */
  --dome-font-family-base: 'Open Sans', system-ui, -apple-system, sans-serif;
  --dome-font-family-title: 'Montserrat', 'Open Sans', system-ui, -apple-system, sans-serif;
  --dome-font-family-mono: 'Courier New', monospace;

  /* Font Size */
  --dome-font-size-xs: 0.75rem; /* 12px */
  --dome-font-size-sm: 0.875rem; /* 14px */
  --dome-font-size-base: 1rem; /* 16px */
  --dome-font-size-lg: 1.125rem; /* 18px */
  --dome-font-size-xl: 1.25rem; /* 20px */
  --dome-font-size-2xl: 1.5rem; /* 24px */

  /* Font Weight */
  --dome-font-weight-normal: 400;
  --dome-font-weight-medium: 500;
  --dome-font-weight-semibold: 600;
  --dome-font-weight-bold: 700;

  /* Line Height */
  --dome-line-height-tight: 1.25;
  --dome-line-height-base: 1.5;
  --dome-line-height-relaxed: 1.75;

  /* ========== BORDERS ========== */

  --dome-border-width-thin: 1px;
  --dome-border-width-base: 2px;
  --dome-border-width-thick: 4px;

  --dome-border-radius-none: 0;
  --dome-border-radius-sm: 0.125rem; /* 2px */
  --dome-border-radius-md: 0.25rem; /* 4px */
  --dome-border-radius-lg: 0.5rem; /* 8px */
  --dome-border-radius-xl: 1rem; /* 16px */
  --dome-border-radius-2xl: 1.5rem; /* 24px */
  --dome-border-radius-full: 9999px;

  /* ========== SHADOWS ========== */

  --dome-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --dome-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --dome-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --dome-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --dome-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ========== TRANSITIONS ========== */

  --dome-transition-fast: 150ms ease-in-out;
  --dome-transition-base: 200ms ease-in-out;
  --dome-transition-slow: 300ms ease-in-out;

  --dome-transition-timing-ease: ease;
  --dome-transition-timing-ease-in: ease-in;
  --dome-transition-timing-ease-out: ease-out;
  --dome-transition-timing-ease-in-out: ease-in-out;

  /* ========== Z-INDEX ========== */

  --dome-z-index-base: 1;
  --dome-z-index-dropdown: 1000;
  --dome-z-index-sticky: 1100;
  --dome-z-index-overlay: 1200;
  --dome-z-index-drawer: 1300;
  --dome-z-index-modal: 1400;
  --dome-z-index-popover: 1500;
  --dome-z-index-tooltip: 1600;

  /* ========== COMPONENT SPECIFIC TOKENS ========== */

  /* Logo */
  --dome-logo-gap: var(--dome-spacing-sm);
  --dome-logo-focus-color: var(--dome-color-info);
  --dome-logo-icon-size-sm: 1.25rem;
  --dome-logo-icon-size-md: 1.5rem;
  --dome-logo-icon-size-lg: 2rem;

  /* Avatar */
  --dome-avatar-bg: var(--dome-color-neutral-300);
  --dome-avatar-color: var(--dome-color-neutral-700);
  --dome-avatar-size-sm: 1.5rem; /* 24px */
  --dome-avatar-size-md: 2rem; /* 32px */
  --dome-avatar-size-lg: 2.5rem; /* 40px */

  /* Chat Input */
  --dome-chat-input-bg: var(--dome-color-bg-primary);
  --dome-chat-input-border: var(--dome-color-neutral-200);
  --dome-chat-input-focus-ring: var(--dome-color-primary);
  --dome-chat-input-padding: var(--dome-spacing-md);
  --dome-chat-input-gap: var(--dome-spacing-sm);
  --dome-chat-input-button-bg: var(--dome-color-primary);
  --dome-chat-input-button-hover: var(--dome-color-primary-hover);
  --dome-chat-input-button-text: var(--dome-color-primary-text);
  --dome-chat-input-disabled-bg: var(--dome-color-neutral-100);
  --dome-chat-input-disabled-text: var(--dome-color-neutral-400);
  --dome-chat-input-placeholder: var(--dome-color-neutral-400);

  /* Message Bubble */
  --dome-message-bubble-user-bg: var(--dome-color-primary);
  --dome-message-bubble-user-text: var(--dome-color-primary-text);
  --dome-message-bubble-bot-bg: var(--dome-color-neutral-200);
  --dome-message-bubble-bot-text: var(--dome-color-neutral-900);
  --dome-message-bubble-padding: 0.75rem 1rem;
  --dome-message-bubble-radius: var(--dome-border-radius-xl);
  --dome-message-bubble-radius-tail: var(--dome-border-radius-sm);
  --dome-message-bubble-max-width: 80%;

  /* Chat Message */
  --dome-chat-container-top-offset: 1rem;
  --dome-chat-message-gap: var(--dome-spacing-sm);
  --dome-chat-message-spacing: var(--dome-spacing-md);

  /* Navigation Drawer */
  --dome-drawer-width: 20rem;
  --dome-drawer-bg: var(--dome-color-bg-primary);
  --dome-drawer-shadow: var(--dome-shadow-lg);
  --dome-drawer-overlay-bg: rgba(0, 0, 0, 0.5);
  --dome-drawer-transition: var(--dome-transition-slow);
  --dome-drawer-navigation-top-offset: 0rem;

  /* Share This Prompt panel */
  --dome-share-panel-width: 18rem;
  --dome-share-panel-bg: var(--dome-color-bg-secondary);

  /* Drawer Header */
  --dome-drawer-header-padding: var(--dome-spacing-md);
  --dome-drawer-header-border: var(--dome-color-neutral-200);

  /* Drawer Footer */
  --dome-drawer-footer-padding: var(--dome-spacing-md);
  --dome-drawer-footer-border: var(--dome-color-neutral-200);
  --dome-drawer-footer-bg: var(--dome-color-bg-secondary);

  /* Drawer Navigation Items */
  --dome-nav-item-padding: 0.75rem 1rem;
  --dome-nav-item-color: var(--dome-color-neutral-700);
  --dome-nav-item-bg: transparent;
  --dome-nav-item-hover-bg: var(--dome-color-neutral-100);
  --dome-nav-item-hover-color: var(--dome-color-neutral-900);
  --dome-nav-item-active-bg: var(--dome-color-neutral-200);
  --dome-nav-item-focus-color: var(--dome-color-info);
  --dome-nav-item-font-size: var(--dome-font-size-sm);
  --dome-nav-item-border-radius: var(--dome-border-radius-lg);

  /* Icon Button */
  --dome-icon-button-size: 2.5rem;
  --dome-icon-button-hover-bg: var(--dome-color-neutral-100);
  --dome-icon-button-active-bg: var(--dome-color-neutral-200);
  --dome-icon-button-focus-ring: var(--dome-color-info);

  /* Typing Indicator */
  --dome-typing-indicator-dot-size: 0.5rem;
  --dome-typing-indicator-dot-color: var(--dome-color-neutral-400);
  --dome-typing-indicator-spacing: var(--dome-spacing-xs);

  /* Scrollbar */
  --dome-scrollbar-width: 6px;
  --dome-scrollbar-track-bg: transparent;
  --dome-scrollbar-thumb-bg: var(--dome-color-neutral-300);
  --dome-scrollbar-thumb-hover-bg: var(--dome-color-neutral-400);
  --dome-scrollbar-thumb-radius: 3px;

  /* Conversation Toggle */
  --dome-toggle-bg-color: linear-gradient(135deg, #0076f9 0%, #004fdb 100%);
  --dome-toggle-bg-hover: linear-gradient(135deg, #0084ff 0%, #005cf7 100%);
  --dome-toggle-bg-active: linear-gradient(135deg, #005cf7 0%, #003bb8 100%);
  --dome-toggle-icon-color: #ffffff;
  --dome-toggle-shadow: 0 8px 24px rgba(0, 79, 219, 0.3);
  --dome-toggle-shadow-hover: 0 12px 32px rgba(0, 79, 219, 0.45);
  --dome-toggle-size-small: 48px;
  --dome-toggle-size-medium: 56px;
  --dome-toggle-size-large: 64px;
  --dome-toggle-border-radius: 50%;
  --dome-toggle-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --dome-toggle-z-index: 999;
  --dome-toggle-offset: 24px;
  --dome-toggle-top: --dome-toggle-offset;
  --dome-toggle-bottom: --dome-toggle-offset;
  --dome-toggle-right: --dome-toggle-offset;
  --dome-toggle-left: --dome-toggle-offset;

  /* Conversation Toggle - Badge */
  --dome-toggle-badge-bg: #ff4081;
  --dome-toggle-badge-text: #ffffff;
  --dome-toggle-badge-size: 20px;
  --dome-toggle-badge-font-size: 11px;

  /* Product Card */
  --dome-card-gap: 0.75rem;
  --dome-card-media-padding: 0.5rem;
  --dome-card-image-height: 8rem;
  --dome-card-vintage-bg: rgba(0, 0, 0, 0.55);
  --dome-card-body-padding: 0.375rem 0.5rem 0.25rem;
  --dome-card-footer-padding: 0.25rem 0.5rem 0.375rem;
  --dome-card-add-size: 1.375rem;

  /* Product Detail */
  --dome-detail-gallery-width: 50%;
  --dome-detail-gallery-min-width: 200px;
  --dome-detail-image-ratio: 4 / 3;
  --dome-detail-thumb-size: 56px;
  --dome-detail-swatch-size: 36px;
  --dome-detail-qty-btn-size: 32px;
  --dome-detail-qty-input-width: 48px;
  --dome-detail-btn-padding: 0.5rem 1rem;
  --dome-detail-btn-radius: 0.375rem;
}

/* ========== DARK MODE ========== */
/*
 * Supports automatic dark mode based on system preferences
 * Integrators can force dark mode with [data-theme="dark"]
 */

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors */
    --dome-color-neutral-50: #27283d; /* Sparx Dark Blue Gray */
    --dome-color-neutral-100: #343650;
    --dome-color-neutral-200: #414464;
    --dome-color-neutral-300: #657e93;
    --dome-color-neutral-700: #c5d2dc;
    --dome-color-neutral-800: #e4ebf0;
    --dome-color-neutral-900: #f8f8f8; /* Sparx Light Gray 3 */

    /* Backgrounds */
    --dome-color-bg-primary: #161722; /* Darker navy base */
    --dome-color-bg-secondary: #27283d; /* Sparx Dark Blue Gray */
    --dome-color-bg-tertiary: #343650;

    /* Component adjustments */
    --dome-chat-input-bg: #27283d;
    --dome-drawer-bg: #161722;
    --dome-message-bubble-bot-bg: #27283d;
    --dome-message-bubble-bot-text: #f8f8f8;
    --dome-drawer-overlay-bg: rgba(18, 19, 26, 0.8);
  }
}

/* Forced dark mode */
[data-theme='dark'] {
  /* Same as dark mode media query */
  --dome-color-neutral-50: #27283d;
  --dome-color-neutral-100: #343650;
  --dome-color-neutral-200: #414464;
  --dome-color-neutral-300: #657e93;
  --dome-color-neutral-700: #c5d2dc;
  --dome-color-neutral-800: #e4ebf0;
  --dome-color-neutral-900: #f8f8f8;

  --dome-color-bg-primary: #161722;
  --dome-color-bg-secondary: #27283d;
  --dome-color-bg-tertiary: #343650;

  --dome-chat-input-bg: #27283d;
  --dome-drawer-bg: #161722;
  --dome-message-bubble-bot-bg: #27283d;
  --dome-message-bubble-bot-text: #f8f8f8;
  --dome-drawer-overlay-bg: rgba(18, 19, 26, 0.8);
}

/* Forced light mode */
[data-theme='light'] {
  --dome-color-neutral-50: #f8f8f8;
  --dome-color-neutral-100: #f1f1f1;
  --dome-color-neutral-200: #e6e6e6;
  --dome-color-neutral-300: #d4dbe2;
  --dome-color-neutral-700: #3b4055;
  --dome-color-neutral-800: #27283d;
  --dome-color-neutral-900: #12131a;

  --dome-color-bg-primary: #ffffff;
  --dome-color-bg-secondary: #f8f8f8;
  --dome-color-bg-tertiary: #f1f1f1;

  --dome-chat-input-bg: #ffffff;
  --dome-drawer-bg: #ffffff;
  --dome-message-bubble-bot-bg: #e6e6e6;
  --dome-message-bubble-bot-text: #12131a;
  --dome-drawer-overlay-bg: rgba(18, 19, 26, 0.5);
}

/* ========== PREVENT FOUC (Flash of Unstyled Content) ========== */
/* Hides custom elements until they are defined to prevent slotted content/images from flashing */
dome-chatbox:not(:defined),
dome-conversation-panel:not(:defined),
dome-conversation-toggle:not(:defined),
dome-navigation-drawer:not(:defined),
dome-chat-input:not(:defined),
dome-chat-message-list:not(:defined),
dome-chat-message:not(:defined),
dome-message-bubble:not(:defined),
dome-avatar:not(:defined),
dome-icon-button:not(:defined),
dome-logo:not(:defined),
dome-typing-indicator:not(:defined),
dome-star-rating:not(:defined) {
  display: none !important;
}

/* Hide slotted Light DOM children until the host component is ready */
dome-chatbox:not([ready]) > *,
dome-conversation-toggle:not([ready]) > *,
dome-chat-input:not([ready]) > * {
  visibility: hidden !important;
}