/* ============================================================
   Secret Shop Conversation Hub — shared design tokens
   Mirrors the Claude Design system
   (project 8f182ebc-3185-4021-8afe-570b35365ec5) so the app shell
   speaks one visual language. Applied per DESIGN_CONCEPT.md §9 as a
   polish pass — no new features, no behavior change.
   Warm-neutral base + one controlled accent (#FA4484).
   ============================================================ */

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

:root {
  /* ---- Base brand neutrals (DESIGN_CONCEPT.md §5) ---- */
  --cream: #faf6f1;
  --sand: #f1eae1;
  --surface: #ffffff;
  --graphite: #2a241f;
  --tint: #fdf0f4;

  /* ---- Accent (#FA4484) — controlled use only ---- */
  --accent: #fa4484;
  --accent-hover: #e83a76;
  --accent-active: #d12e68;
  --accent-tint: #fdf0f4;
  --accent-tint-strong: #fbdce8;

  /* ---- Warm neutral scale ---- */
  --neutral-0: #ffffff;
  --neutral-50: #faf6f1;
  --neutral-100: #f1eae1;
  --neutral-200: #e4dbcf;
  --neutral-300: #d2c6b7;
  --neutral-400: #a99c8c;
  --neutral-500: #86786a;
  --neutral-600: #63584c;
  --neutral-700: #453d34;
  --neutral-800: #2a241f;
  --neutral-900: #1b1713;

  /* ---- Status colors — one muted, distinguishable hue per status ---- */
  --status-new: #4e7fd1;      --status-new-bg: #eaf1fc;
  --status-open: #2e8f7c;     --status-open-bg: #e6f4f1;
  --status-waiting: #c98a2e;  --status-waiting-bg: #fbf0e1;
  --status-resolved: #3f9d5c; --status-resolved-bg: #e9f6ed;
  --status-closed: #8a8378;   --status-closed-bg: #f0ede8;

  /* ---- Semantic feedback ---- */
  --success: #3f9d5c; --success-bg: #e9f6ed;
  --error: #d64545;   --error-bg: #fbeaea;
  --info: #4e7fd1;    --info-bg: #eaf1fc;

  /* ---- Internal / staff-only note — must never resemble a message ---- */
  --note-bg: #fff6d8;
  --note-border: #f0dfa0;
  --note-text: #6b5b1f;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--cream);
  --surface-card: var(--surface);
  --surface-sunken: var(--sand);
  --surface-tint: var(--tint);
  --surface-widget-header: var(--graphite);

  --text-primary: var(--graphite);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-link: var(--accent);
  --text-link-hover: var(--accent-hover);
  --text-on-accent: var(--neutral-0);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--accent);

  --icon-default: var(--neutral-600);
  --icon-muted: var(--neutral-400);

  /* ---- Type ---- */
  --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px;
  --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px;
  --text-3xl: 28px; --text-4xl: 36px;

  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600;
  --font-weight-bold: 700; --font-weight-extrabold: 800;

  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em;

  /* ---- Spacing (4px grid) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;

  /* ---- Radius + shadow ---- */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --radius-console: 6px;   /* operator buttons, inputs, list items */
  --radius-widget: 12px;   /* widget panel, bubbles */
  --radius-bubble: 10px;

  --shadow-sm: 0 1px 2px rgba(42, 36, 31, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 36, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 36, 31, 0.14);
  --shadow-launcher: 0 8px 24px rgba(250, 68, 132, 0.32);
  --shadow-overlay: 0 20px 48px rgba(27, 23, 19, 0.18);

  --focus-ring: 0 0 0 3px rgba(250, 68, 132, 0.25);
}