/* ============================================================================
   BUBBLEGUM DESIGN TOKENS — the one sheet every product surface imports.
   styleguide.bubblegum.ai is the reference; this file is the truth.

   Rules of the road:
   - Product UI reads these names, never raw hex. A colour that is not here is
     not a Bubblegum colour.
   - Marketing (landing) shares the type scale and the neutrals; it keeps its
     own hero palette, which is documented on the guide, not here.
   - Dark surfaces (Cards) are the same names with the `[data-theme="dark"]`
     values below — never a second vocabulary.
   ========================================================================== */

:root {
  /* ---- Type -------------------------------------------------------------- */
  --bg-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg-text-2xs: 11px;   /* eyebrows (uppercase, tracked) */
  --bg-text-xs: 12px;    /* meta, chips, mini buttons */
  --bg-text-sm: 12.5px;  /* secondary body, notes */
  --bg-text-md: 13px;    /* body — the default */
  --bg-text-lg: 14px;    /* card titles, list names */
  --bg-text-xl: 16px;    /* panel titles */
  --bg-text-2xl: 20px;   /* page titles */
  --bg-text-3xl: 26px;   /* shelf / screen titles */

  --bg-leading-tight: 1.25;
  --bg-leading: 1.45;
  --bg-leading-loose: 1.62; /* chat bubbles */

  --bg-weight: 400;
  --bg-weight-medium: 500;
  --bg-weight-semibold: 600;
  --bg-weight-bold: 700;

  --bg-tracking-eyebrow: 0.07em;

  /* ---- Neutrals ---------------------------------------------------------- */
  --bg-canvas: #fbfbfc;        /* the page behind everything */
  --bg-panel: #ffffff;         /* cards, drawers, modals, Bubbles */
  --bg-soft: #f6f7f9;          /* quiet fills: inputs at rest, hover rows */
  --bg-soft-2: #f1f2f6;        /* segmented-control track, icon-button hover */
  --bg-line: #e3e3e6;          /* every 1px rule and border */
  --bg-line-strong: #c8c9cf;   /* hovered borders */

  --bg-ink: #1f2330;           /* primary text */
  --bg-ink-muted: #6b7280;     /* secondary text, labels */
  --bg-ink-subtle: #9aa0a6;    /* placeholders, disabled, tertiary */
  --bg-ink-inverse: #ffffff;

  /* ---- Accent (Bubblegum Violet) ----------------------------------------- */
  --bg-accent: #5b5bd6;
  --bg-accent-hover: #4f4fc4;
  --bg-accent-weak: #eeeefb;   /* tinted fills, selected rows, "me" bubbles */
  --bg-accent-line: #dedef7;   /* borders on tinted fills */
  --bg-accent-ink: #3f3fa8;    /* violet text on a tinted fill */
  --bg-accent-ring: rgba(91, 91, 214, 0.14);

  /* ---- Status ------------------------------------------------------------ */
  --bg-success: #1f9d57;
  --bg-success-weak: #eafbf0;
  --bg-success-ink: #137333;

  --bg-warning: #b45309;
  --bg-warning-weak: #fff8e8;
  --bg-warning-line: #f0dcae;
  --bg-warning-ink: #7a5b12;

  --bg-danger: #d93025;
  --bg-danger-weak: #fce8e6;
  --bg-danger-line: #f4cdc9;
  --bg-danger-ink: #b42318;

  /* Two sides of a conversation (Outbound, transcripts): ours and theirs. */
  --bg-side-mine: #0f766e;
  --bg-side-mine-weak: #e8f6f4;
  --bg-side-theirs: #be185d;
  --bg-side-theirs-weak: #fdf0f6;

  /* ---- Radius ------------------------------------------------------------ */
  --bg-radius-xs: 6px;    /* checkboxes, tiny tags */
  --bg-radius-sm: 8px;    /* icon buttons, segmented tabs */
  --bg-radius-md: 10px;   /* buttons, inputs, dropdown menus */
  --bg-radius-lg: 12px;   /* cards, option cards, notes, toasts */
  --bg-radius-xl: 16px;   /* modals, panels, hero tiles */
  --bg-radius-pill: 999px;
  --bg-radius-circle: 50%;
  /* ONE SHAPE FOR EVERYTHING YOU PRESS (v1.1): every button, chip, tab and
     toggle is a pill. Rectangles are for what you type in or read (inputs,
     cards, menus, notes). The same function never has two shapes. */
  --bg-radius-press: var(--bg-radius-pill);
  --bg-btn-h: 36px;
  --bg-btn-h-sm: 30px;

  /* ---- Space (4px grid) -------------------------------------------------- */
  --bg-space-1: 4px;
  --bg-space-2: 8px;
  --bg-space-3: 12px;
  --bg-space-4: 16px;
  --bg-space-5: 20px;
  --bg-space-6: 24px;
  --bg-space-8: 32px;
  --bg-gutter: 20px;          /* inside panels and drawers */
  --bg-gutter-page: 24px;     /* page edge */

  /* ---- Elevation --------------------------------------------------------- */
  --bg-shadow-rest: 0 1px 2px rgba(16, 16, 26, 0.04), 0 1px 3px rgba(16, 16, 26, 0.03);
  --bg-shadow-lift: 0 4px 16px rgba(16, 16, 26, 0.08), 0 1px 3px rgba(16, 16, 26, 0.05);
  --bg-shadow-float: 0 12px 30px rgba(16, 16, 26, 0.14);           /* menus, popovers */
  --bg-shadow-modal: 0 20px 60px rgba(16, 16, 26, 0.25);
  --bg-shadow-toast: 0 12px 30px rgba(16, 16, 26, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --bg-shadow-accent: 0 1px 2px rgba(91, 91, 214, 0.25);           /* primary button */

  /* ---- Motion ------------------------------------------------------------ */
  --bg-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bg-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bg-dur-hover: 150ms;
  --bg-dur-enter: 200ms;
  --bg-dur-exit: 180ms;
  --bg-tip-delay: 300ms;

  /* ---- Layout constants -------------------------------------------------- */
  --bg-bar-h: 57px;        /* every top bar: app head, drawer head, Bubbles head */
  --bg-dock-w: 344px;      /* Bubbles */
  --bg-drawer-w: 540px;    /* a side drawer */
  --bg-drawer-wide-w: 900px;
  --bg-modal-w: 460px;
  --bg-page-w: 1080px;
  --bg-floor-w: 1204px;    /* below this the app asks for a wider window */

  /* ---- Scrim ------------------------------------------------------------- */
  --bg-scrim: rgba(16, 16, 26, 0.34);
}

/* Dark surfaces: Cards (the visitor-facing business card) and any future dark
   mode. Same names, so a component written once is right in both. */
[data-theme="dark"] {
  --bg-canvas: #0a0f1e;
  --bg-panel: #111a30;
  --bg-soft: #16213c;
  --bg-soft-2: #1b2745;
  --bg-line: #1e2b48;
  --bg-line-strong: #2c3d63;
  --bg-ink: #e8edf7;
  --bg-ink-muted: #8b9ac0;
  --bg-ink-subtle: #5f6f99;
  --bg-ink-inverse: #0a0f1e;
  --bg-accent: #6f6fe6;
  --bg-accent-hover: #8585ee;
  --bg-accent-weak: #1d1f4a;
  --bg-accent-line: #33368a;
  --bg-accent-ink: #b9b9ff;
  --bg-success: #34c77a;
  --bg-success-weak: #0f2a1d;
  --bg-warning: #f59e0b;
  --bg-warning-weak: #2c2110;
  --bg-warning-line: #5a4416;
  --bg-warning-ink: #f5c86a;
  --bg-danger: #f87171;
  --bg-danger-weak: #2e1515;
  --bg-danger-line: #5a2626;
  --bg-danger-ink: #ffb4b4;
  --bg-shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.3);
  --bg-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bg-dur-hover: 0ms;
    --bg-dur-enter: 0ms;
    --bg-dur-exit: 0ms;
  }
}