/* ============================================================
   Chatbot Platform — Design Tokens
   Inferred from the Flask/Jinja + Tailwind source. Mirrors the
   Tailwind palette in use across the admin app + landing page.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLORS — BASE PALETTE
     ---------------------------------------------------------- */

  /* Primary — Blue (in-product canonical) */
  --cp-blue-50:  #eff6ff;
  --cp-blue-100: #dbeafe;
  --cp-blue-200: #bfdbfe;
  --cp-blue-400: #60a5fa;
  --cp-blue-500: #3b82f6;   /* active-nav left stripe */
  --cp-blue-600: #2563eb;   /* primary action */
  --cp-blue-700: #1d4ed8;   /* hover on primary action */
  --cp-blue-800: #1e40af;

  /* Indigo — landing / marketing accent */
  --cp-indigo-50:  #eef2ff;
  --cp-indigo-600: #4f46e5;
  --cp-indigo-700: #4338ca;

  /* Purple — reserved for bot identity */
  --cp-purple-50:  #faf5ff;
  --cp-purple-100: #f3e8ff;
  --cp-purple-500: #a855f7;   /* bot avatar / nav accent */
  --cp-purple-600: #9333ea;   /* bot bubble */
  --cp-purple-700: #7e22ce;   /* gradient stop on landing */

  /* Neutral gray scale */
  --cp-gray-50:  #f9fafb;
  --cp-gray-100: #f3f4f6;
  --cp-gray-200: #e5e7eb;
  --cp-gray-300: #d1d5db;
  --cp-gray-400: #9ca3af;
  --cp-gray-500: #6b7280;
  --cp-gray-600: #4b5563;
  --cp-gray-700: #374151;   /* sidebar hover bg, active nav bg */
  --cp-gray-800: #1f2937;   /* sidebar dividers */
  --cp-gray-900: #111827;   /* sidebar surface */
  --cp-white:    #ffffff;
  --cp-black:    #000000;

  /* Semantic colors — used at -100 bg + -700 text for pills */
  --cp-green-50:  #f0fdf4;
  --cp-green-100: #dcfce7;
  --cp-green-500: #22c55e;
  --cp-green-600: #16a34a;
  --cp-green-700: #15803d;

  --cp-red-50:  #fef2f2;
  --cp-red-100: #fee2e2;
  --cp-red-200: #fecaca;
  --cp-red-500: #ef4444;
  --cp-red-600: #dc2626;
  --cp-red-700: #b91c1c;

  --cp-orange-100: #ffedd5;
  --cp-orange-500: #f97316;
  --cp-orange-700: #c2410c;

  --cp-pink-500:  #ec4899;
  --cp-teal-500:  #14b8a6;

  /* ----------------------------------------------------------
     COLORS — SEMANTIC ROLES
     ---------------------------------------------------------- */

  /* Foregrounds */
  --cp-fg-1: var(--cp-gray-900);   /* page H1, primary body */
  --cp-fg-2: var(--cp-gray-800);   /* H2, strong body */
  --cp-fg-3: var(--cp-gray-700);   /* body */
  --cp-fg-4: var(--cp-gray-600);   /* secondary body */
  --cp-fg-5: var(--cp-gray-500);   /* tertiary, helper text */
  --cp-fg-6: var(--cp-gray-400);   /* mute / icons */
  --cp-fg-on-dark: var(--cp-gray-300);  /* default sidebar text */
  --cp-fg-on-primary: var(--cp-white);

  /* Backgrounds */
  --cp-bg-app:      var(--cp-gray-50);    /* main canvas */
  --cp-bg-card:     var(--cp-white);      /* card surface */
  --cp-bg-sidebar:  var(--cp-gray-900);   /* dark sidebar */
  --cp-bg-topbar:   var(--cp-white);      /* top header */
  --cp-bg-table-h:  var(--cp-gray-50);    /* table header strip */
  --cp-bg-hover:    var(--cp-gray-50);    /* row hover */
  --cp-bg-selected: var(--cp-blue-50);    /* conversation selected */
  --cp-bg-auth:     var(--cp-gray-100);   /* login background */

  /* Borders */
  --cp-border-1: var(--cp-gray-100);      /* row dividers */
  --cp-border-2: var(--cp-gray-200);      /* card borders */
  --cp-border-3: var(--cp-gray-300);      /* input border */
  --cp-border-on-dark: var(--cp-gray-800);

  /* Brand actions */
  --cp-action-bg:        var(--cp-blue-600);
  --cp-action-bg-hover:  var(--cp-blue-700);
  --cp-action-fg:        var(--cp-white);
  --cp-action-ring:      var(--cp-blue-500);

  --cp-link:        var(--cp-blue-600);
  --cp-link-hover:  var(--cp-blue-700);

  /* Identity */
  --cp-bot:         var(--cp-green-500);    /* bot bubble outline */
  --cp-bot-soft:    var(--cp-green-100);
  --cp-agent:       var(--cp-blue-400);     /* agent bubble outline */
  --cp-end-user-bubble-bg:     var(--cp-white);
  --cp-end-user-bubble-border: var(--cp-gray-200);

  /* Status pill backgrounds + text (paired) */
  --cp-status-open-bg:       var(--cp-green-100);
  --cp-status-open-fg:       var(--cp-green-700);
  --cp-status-assigned-bg:   var(--cp-blue-100);
  --cp-status-assigned-fg:   var(--cp-blue-700);
  --cp-status-resolved-bg:   var(--cp-gray-100);
  --cp-status-resolved-fg:   var(--cp-gray-500);
  --cp-status-strict-bg:     var(--cp-orange-100);
  --cp-status-strict-fg:     var(--cp-orange-700);
  --cp-status-flexible-bg:   var(--cp-blue-100);
  --cp-status-flexible-fg:   var(--cp-blue-700);

  /* Flash / alert tints */
  --cp-flash-info-bg:    var(--cp-blue-50);
  --cp-flash-info-fg:    var(--cp-blue-700);
  --cp-flash-info-bd:    var(--cp-blue-200);
  --cp-flash-success-bg: var(--cp-green-50);
  --cp-flash-success-fg: var(--cp-green-700);
  --cp-flash-success-bd: #bbf7d0;
  --cp-flash-error-bg:   var(--cp-red-50);
  --cp-flash-error-fg:   var(--cp-red-700);
  --cp-flash-error-bd:   var(--cp-red-200);

  /* Avatar rotation (used for end-user/agent initials) */
  --cp-avatar-1: var(--cp-blue-500);
  --cp-avatar-2: var(--cp-green-500);
  --cp-avatar-3: var(--cp-purple-500);
  --cp-avatar-4: var(--cp-orange-500);
  --cp-avatar-5: var(--cp-pink-500);
  --cp-avatar-6: var(--cp-teal-500);

  /* Doodle palette (for inline SVG empty-state illustrations) */
  --cp-doodle-soft:   #e5e7eb;   /* gray-200 — on light cards */
  --cp-doodle-strong: #9ca3af;   /* gray-400 — on dotted-grid bg */

  /* Landing gradient (single permitted gradient) */
  --cp-landing-gradient: linear-gradient(to bottom right, var(--cp-indigo-600), var(--cp-purple-700));

  /* Dotted grid backgrounds */
  --cp-dot-color-light:  #cbd5e1;
  --cp-dot-color-medium: #d1d5db;
  --cp-dot-color-dark:   rgba(255, 255, 255, 0.05);
  --cp-dot-size:         22px;
  --cp-dot-size-dark:    18px;

  /* ----------------------------------------------------------
     TYPE
     ---------------------------------------------------------- */

  /* Families — Hanken Grotesk for UI, system mono for code.
     Load via Google Fonts in each consuming HTML:
       <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> */
  --cp-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --cp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
  --cp-font-display: var(--cp-font-sans);   /* no separate display face */

  /* Size scale (Tailwind defaults) */
  --cp-text-xs:   0.75rem;     /* 12px — pills, micro */
  --cp-text-sm:   0.875rem;    /* 14px — body default */
  --cp-text-base: 1rem;        /* 16px */
  --cp-text-lg:   1.125rem;    /* 18px — card section header */
  --cp-text-xl:   1.25rem;     /* 20px — sidebar wordmark */
  --cp-text-2xl:  1.5rem;      /* 24px — page H1 */
  --cp-text-3xl:  1.875rem;    /* 30px — auth/landing brand */
  --cp-text-4xl:  2.25rem;     /* 36px — large stat numbers */

  /* Line heights */
  --cp-leading-tight:  1.25;
  --cp-leading-snug:   1.375;
  --cp-leading-normal: 1.5;
  --cp-leading-relaxed: 1.625;

  /* Weights */
  --cp-weight-normal:   400;
  --cp-weight-medium:   500;
  --cp-weight-semibold: 600;
  --cp-weight-bold:     700;

  /* Letter spacing */
  --cp-tracking-tight:  -0.01em;
  --cp-tracking-normal:  0;
  --cp-tracking-wide:    0.025em;   /* uppercase section labels */

  /* ----------------------------------------------------------
     SPACING (Tailwind 0.25rem step)
     ---------------------------------------------------------- */
  --cp-space-1:  0.25rem;
  --cp-space-2:  0.5rem;
  --cp-space-3:  0.75rem;
  --cp-space-4:  1rem;
  --cp-space-5:  1.25rem;
  --cp-space-6:  1.5rem;
  --cp-space-8:  2rem;
  --cp-space-10: 2.5rem;
  --cp-space-12: 3rem;

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --cp-radius-sm:   0.125rem;
  --cp-radius:      0.25rem;     /* table pills */
  --cp-radius-md:   0.375rem;
  --cp-radius-lg:   0.5rem;      /* inputs, buttons */
  --cp-radius-xl:   0.75rem;     /* content cards */
  --cp-radius-2xl:  1rem;        /* auth card, message bubble */
  --cp-radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --cp-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --cp-shadow:    0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --cp-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --cp-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --cp-sidebar-w:   16rem;       /* w-64 */
  --cp-topbar-h:    3.5rem;      /* h-14 */
  --cp-content-pad: 1.5rem;      /* p-6 */

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --cp-transition: 150ms ease;
  --cp-transition-color: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — for plain HTML / non-Tailwind use
   ============================================================ */

html, body {
  font-family: var(--cp-font-sans);
  color: var(--cp-fg-3);
  background: var(--cp-bg-app);
  font-size: var(--cp-text-sm);
  line-height: var(--cp-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .cp-h1 {
  font-size: var(--cp-text-2xl);
  font-weight: var(--cp-weight-bold);
  color: var(--cp-fg-2);
  line-height: var(--cp-leading-tight);
  margin: 0 0 var(--cp-space-6);
}

h2, .cp-h2 {
  font-size: var(--cp-text-lg);
  font-weight: var(--cp-weight-semibold);
  color: var(--cp-fg-2);
  line-height: var(--cp-leading-snug);
  margin: 0 0 var(--cp-space-4);
}

h3, .cp-h3 {
  font-size: var(--cp-text-base);
  font-weight: var(--cp-weight-semibold);
  color: var(--cp-fg-1);
  line-height: var(--cp-leading-snug);
  margin: 0 0 var(--cp-space-2);
}

p, .cp-p {
  font-size: var(--cp-text-sm);
  color: var(--cp-fg-3);
  line-height: var(--cp-leading-normal);
  margin: 0 0 var(--cp-space-4);
}

small, .cp-caption {
  font-size: var(--cp-text-xs);
  color: var(--cp-fg-5);
  line-height: var(--cp-leading-snug);
}

code, kbd, samp, .cp-mono {
  font-family: var(--cp-font-mono);
  font-size: 0.85em;
  background: var(--cp-gray-100);
  border-radius: var(--cp-radius);
  padding: 0.1em 0.35em;
}

a, .cp-link {
  color: var(--cp-link);
  text-decoration: none;
  transition: var(--cp-transition-color);
}
a:hover, .cp-link:hover {
  text-decoration: underline;
  color: var(--cp-link-hover);
}

/* Section uppercase label (sidebar group, table head) */
.cp-eyebrow {
  font-size: var(--cp-text-xs);
  font-weight: var(--cp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--cp-tracking-wide);
  color: var(--cp-fg-5);
}

/* Canonical card */
.cp-card {
  background: var(--cp-bg-card);
  border-radius: var(--cp-radius-xl);
  border: 1px solid var(--cp-border-2);
  box-shadow: var(--cp-shadow-sm);
}

/* Dotted-grid background — main canvas */
.cp-bg-dotgrid {
  background-image: radial-gradient(circle at 1px 1px, var(--cp-dot-color-light) 1px, transparent 0);
  background-size: var(--cp-dot-size) var(--cp-dot-size);
}
/* Dotted-grid — auth surface */
.cp-bg-dotgrid-auth {
  background-image: radial-gradient(circle at 1px 1px, var(--cp-dot-color-medium) 1px, transparent 0);
  background-size: var(--cp-dot-size) var(--cp-dot-size);
}
/* Dotted-grid — dark sidebar overlay */
.cp-bg-dotgrid-dark {
  background-image: radial-gradient(circle at 1px 1px, var(--cp-dot-color-dark) 1px, transparent 0);
  background-size: var(--cp-dot-size-dark) var(--cp-dot-size-dark);
}