/*
 * MCE Chatbot — design tokens.
 *
 * This file exposes the brand tokens both on the document root (so a host
 * page can reference them if it ever wants to) AND inside the widget's
 * Shadow DOM via the :host selector.
 *
 * The Web Component reads window.MCE_CHATBOT_CONFIG.design at runtime and
 * overwrites these as inline custom properties — the values below are the
 * fallback used if the JS config ever fails to load.
 *
 * Brand reference: brief §8.
 * Design tokens: mce-chatbot-mockup.html :root block.
 */

:host,
:root {
  /* Surfaces */
  --mce-ink:           #161410;
  --mce-ink-soft:      #2a2620;
  --mce-paper:         #faf6ee;
  --mce-cream:         #f5efe1;
  --mce-panel:         #ffffff;
  --mce-panel-soft:    #f7f1e3;
  --mce-border:        #e6dcc6;
  --mce-border-soft:   #efe8d5;
  --mce-muted:         #847b6c;
  --mce-muted-2:       #b6ad9a;

  /* Brand */
  --mce-gold:          #c4a020;
  --mce-gold-deep:     #9a7b14;
  --mce-gold-soft:     #f0dc9d;
  --mce-gold-tint:     #fbf3d7;

  /* Status */
  --mce-red:           #ea1d2f;
  --mce-green:         #1f7a3a;

  /* Type */
  --mce-font-display:  'Fraunces', 'Times New Roman', serif;
  --mce-font-body:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Elevation */
  --mce-shadow-widget: 0 28px 88px -24px rgba(22, 20, 16, 0.32),
                        0 10px 28px -10px rgba(22, 20, 16, 0.14);
  --mce-shadow-trigger:0 14px 36px -8px rgba(196, 160, 32, 0.50),
                        0 4px 10px -2px rgba(22, 20, 16, 0.18);
  --mce-shadow-card:   0 1px 0 rgba(22, 20, 16, 0.04),
                        0 8px 24px -10px rgba(22, 20, 16, 0.10);

  /* Geometry */
  --mce-radius-l:      22px;
  --mce-radius-m:      14px;
  --mce-radius-bubble: 18px;
  --mce-radius-pill:   999px;

  /* Layout */
  --mce-widget-width:  408px;
  --mce-widget-height: 660px;
  --mce-widget-offset: 28px;
  --mce-widget-z:      2147483000;
}

/*
 * The custom element itself is invisible — all visible UI lives inside
 * Shadow DOM. We just make sure the host doesn't break the host page's
 * layout.
 */
mce-chatbot {
  display: contents;
}