/* eGain Design System — core tokens
 *
 * Sources of truth (in priority order):
 *   1. User-confirmed brand fonts: Open Sans (web/app) · Aileron (presentations)
 *   2. User-provided screenshots of the eGain AI Agent for Contact Center product
 *   3. uploads/design-tokens.ts — Figma + Brand Manual 2026 extraction
 *
 * See README.md for provenance notes.
 */

/* --------------------------------------------------------------------
 * 1. FONTS
 *
 * Per eGain Brand Manual 2026:
 *   Primary (web + print):  Helvetica Neue Pro
 *   Secondary (slides only): Aileron
 *
 * Helvetica Neue Pro is a licensed typeface and is not bundled here.
 * On systems without it we fall back through: Helvetica → Arial → Open Sans
 * (Open Sans is loaded from Google Fonts as a reasonable free stand-in for
 * product mockups. Swap in a licensed Helvetica Neue build for production.)
 * ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* ================================================================
   * COLOR — BRAND
   * ============================================================== */
  --color-magenta-50:  #FDF2FA;
  --color-magenta-100: #FCE7F5;
  --color-magenta-200: #FACFEC;
  --color-magenta-300: #F7A8DC;
  --color-magenta-400: #F272C3;
  --color-magenta-500: #D93DA6;
  --color-magenta-600: #B91D8F;  /* eGain Magenta — brand primary */
  --color-magenta-700: #9A1677;  /* hover */
  --color-magenta-800: #7E1461;
  --color-magenta-900: #68124F;

  --color-brand:       #B91D8F;
  --color-brand-hover: #9A1677;
  --color-brand-pink:  #FEF0FD;  /* eGain Pink — wash used for user chat bubbles, active nav */
  --color-brand-light: #FDF2FA;

  /* Pantone equivalent (print): 18-2336 TCX Very Berry */

  /* ================================================================
   * COLOR — SECONDARY PASTELS (eGain brand guide 2026)
   * ============================================================== */
  --color-pastel-pink:      #FEF0FD;
  --color-pastel-ochre:     #F8DC8B;
  --color-pastel-blue:      #E9F6FD;
  --color-pastel-purple:    #EFECFF;
  --color-pastel-turquoise: #E6F6F8;
  --color-pastel-yellow:    #FFFCDF;

  /* ================================================================
   * COLOR — NEUTRALS
   * ============================================================== */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* Foreground */
  --color-fg-primary:   #111827;
  --color-fg-secondary: #4B5563;
  --color-fg-tertiary:  #6B7280;
  --color-fg-disabled:  #9CA3AF;
  --color-fg-inverse:   #FFFFFF;
  --color-fg-brand:     #B91D8F;
  --color-fg-link:      #B91D8F;
  --color-fg-link-hover:#9A1677;

  /* Surfaces */
  --color-bg-primary:     #FFFFFF;
  --color-bg-secondary:   #F9FAFB;
  --color-bg-tertiary:    #F3F4F6;
  --color-bg-header:      #F5F5F7;  /* top app bar background observed in screenshots */
  --color-bg-inverse:     #111827;
  --color-bg-brand:       #B91D8F;
  --color-bg-brand-subtle:#FEF0FD;

  /* Borders */
  --color-border-primary:   #E5E7EB;
  --color-border-secondary: #D1D5DB;
  --color-border-tertiary:  #F3F4F6;
  --color-border-focus:     #B91D8F;
  --color-border-brand:     #B91D8F;

  /* Icons */
  --color-icon-primary:   #374151;
  --color-icon-secondary: #6B7280;
  --color-icon-tertiary:  #9CA3AF;
  --color-icon-brand:     #B91D8F;
  --color-icon-inverse:   #FFFFFF;

  /* ================================================================
   * COLOR — SEMANTIC (status)
   * ============================================================== */
  /* Success */
  --color-success-fg:     #16A34A;
  --color-success-bg:     #F0FDF4;
  --color-success-muted:  #DCFCE7;
  --color-success-border: #16A34A;

  /* Warning */
  --color-warning-fg:     #D97706;
  --color-warning-bg:     #FFFBEB;
  --color-warning-muted:  #FEF3C7;
  --color-warning-border: #FDE68A;

  /* Danger */
  --color-danger-fg:      #DC2626;
  --color-danger-bg:      #FEF2F2;
  --color-danger-muted:   #FEE2E2;
  --color-danger-border:  #DC2626;

  /* Info */
  --color-info-fg:        #2563EB;
  --color-info-bg:        #EFF6FF;
  --color-info-muted:     #DBEAFE;
  --color-info-border:    #2563EB;

  /* Overlays */
  --color-scrim:   rgba(0, 0, 0, 0.5);

  /* ================================================================
   * COLOR — DATA VISUALIZATION (observed in product analytics screens)
   * ============================================================== */
  --color-chart-yellow: #FBBF24;  /* "All" / total series */
  --color-chart-green:  #22C55E;  /* "Resolved" / positive series */
  --color-chart-blue:   #3B82F6;  /* "Abandoned" / neutral-info series */
  --color-chart-magenta:#B91D8F;  /* brand-aligned primary series */

  /* ================================================================
   * TYPOGRAPHY
   * ============================================================== */
  /* Web & product (apps, websites) — Helvetica Neue Pro per brand manual,
     with Open Sans + Arial as fallback */
  --font-sans: 'Helvetica Neue', Helvetica, 'Open Sans', Arial, system-ui, sans-serif;
  /* Presentations & slide decks — Aileron (brand manual: slides only) */
  --font-presentation: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Monospace — code, metrics */
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, Menlo, monospace;

  /* Weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Size scale (from design-tokens.ts) */
  --font-size-3xs: 10px;
  --font-size-2xs: 11px;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-base:16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  /* Line heights */
  --lh-none:    1.0;
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* Tracking */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ================================================================
   * SPACING
   * ============================================================== */
  --space-0:    0;
  --space-0_5:  2px;
  --space-1:    4px;
  --space-1_5:  6px;
  --space-2:    8px;
  --space-2_5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ================================================================
   * RADIUS
   * ============================================================== */
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ================================================================
   * SHADOW — elevation ramp
   * ============================================================== */
  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-base: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  --elev-card:     var(--shadow-base);
  --elev-dropdown: 0 4px 12px rgba(0,0,0,0.1);
  --elev-toast:    0 4px 12px rgba(0,0,0,0.18);
  --elev-modal:    var(--shadow-xl);
  --elev-popover:  var(--shadow-lg);
  --elev-tooltip:  var(--shadow-md);

  --ring-brand:        0 0 0 3px rgba(185,29,143,0.12);  /* inputs */
  --ring-brand-medium: 0 0 0 3px rgba(185,29,143,0.18);  /* toggles */
  --ring-brand-strong: 0 0 0 3px rgba(185,29,143,0.20);  /* primary buttons */

  /* ================================================================
   * MOTION
   * ============================================================== */
  --motion-fastest: 50ms;
  --motion-faster:  100ms;
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-slow:    300ms;
  --motion-slower:  400ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      ease-out;
  --ease-in-out:   ease-in-out;

  /* ================================================================
   * Z-INDEX
   * ============================================================== */
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-banner:   1200;
  --z-overlay:  1300;
  --z-modal:    1400;
  --z-popover:  1500;
  --z-toast:    1700;
  --z-tooltip:  1800;
}

/* --------------------------------------------------------------------
 * 2. SEMANTIC TYPE CLASSES (Open Sans — web/app)
 * ------------------------------------------------------------------ */
.type-display-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.type-display-md {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.type-display-sm {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xl);
  line-height: var(--lh-snug);
}
.type-heading-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  line-height: var(--lh-snug);
}
.type-heading-md {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  line-height: var(--lh-normal);
}
.type-heading-sm {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
}
.type-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}
.type-body-md {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
.type-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: var(--lh-normal);
}
.type-label-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
}
.type-label-md {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
.type-label-sm {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  line-height: var(--lh-normal);
}
.type-caption {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  line-height: var(--lh-normal);
  color: var(--color-fg-tertiary);
}
.type-code {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

/* Presentation-only type scale (slide decks) — apply .deck class to a slide root */
.deck,
.deck h1, .deck h2, .deck h3, .deck h4, .deck h5, .deck p, .deck span, .deck li {
  font-family: var(--font-presentation);
}

/* --------------------------------------------------------------------
 * 3. ELEMENT DEFAULTS
 * ------------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  color: var(--color-fg-primary);
  background: var(--color-bg-primary);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
h1 { font: var(--font-weight-bold) var(--font-size-4xl)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--font-weight-bold) var(--font-size-3xl)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); margin: 0; }
h3 { font: var(--font-weight-semibold) var(--font-size-2xl)/var(--lh-snug) var(--font-sans); margin: 0; }
h4 { font: var(--font-weight-semibold) var(--font-size-xl)/var(--lh-snug) var(--font-sans); margin: 0; }
h5 { font: var(--font-weight-semibold) var(--font-size-lg)/var(--lh-normal) var(--font-sans); margin: 0; }
p  { font: var(--font-weight-regular) var(--font-size-sm)/var(--lh-normal) var(--font-sans); margin: 0; }
code, pre { font-family: var(--font-mono); }
a { color: var(--color-fg-link); text-underline-offset: 2px; }
a:hover { color: var(--color-fg-link-hover); }

/* --------------------------------------------------------------------
 * 4. BUTTONS — eGain pill button system
 *
 * Rules:
 *   .eg-btn-primary  → default for primary actions. Outlined magenta;
 *                      FILLS magenta on hover. Use when there's ONE
 *                      primary action on the screen.
 *   .eg-btn-primary-soft → for multi-primary contexts (2+ primaries
 *                      on one screen). Outlined magenta; light pink
 *                      wash on hover. Keeps both peers visually equal.
 *   .eg-btn-filled   → reserved for commitment / paid CTAs (Buy Now,
 *                      Sign up). Filled magenta; darker magenta on
 *                      hover. Use sparingly.
 *   .eg-btn-neutral  → secondary actions; outlined grey.
 *   .eg-btn-ghost    → tertiary / dismissive actions; no border.
 *
 * All sizes use `border-radius: 9999px` (pill).
 * ------------------------------------------------------------------ */
.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font: 500 14px/1.2 var(--font-sans);
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--color-fg-primary);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}
.eg-btn:focus-visible { outline: none; box-shadow: var(--ring-brand-strong); }
.eg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.eg-btn-primary {
  background: #FFFFFF;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.eg-btn-primary:hover:not([disabled]) {
  background: var(--color-brand);
  color: #FFFFFF;
}

.eg-btn-primary-soft {
  background: #FFFFFF;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.eg-btn-primary-soft:hover:not([disabled]) {
  background: var(--color-brand-pink);
  color: var(--color-brand);
}

.eg-btn-filled {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}
.eg-btn-filled:hover:not([disabled]) {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.eg-btn-neutral {
  background: #FFFFFF;
  border-color: var(--color-border-secondary);
  color: var(--color-fg-primary);
}
.eg-btn-neutral:hover:not([disabled]) {
  background: var(--color-bg-secondary);
}

.eg-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-fg-secondary);
}
.eg-btn-ghost:hover:not([disabled]) {
  background: var(--color-bg-tertiary);
}

.eg-btn-sm  { padding: 6px 14px; font-size: 13px; }
.eg-btn-lg  { padding: 10px 24px; font-size: 15px; }