/* =================================================================
   MiStock Design System — colors & type
   ================================================================= */

@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Thin.otf")        format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-ThinItalic.otf")  format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Ultralight.otf")  format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-UltralightItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Light.otf")       format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-LightItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Regular.otf")     format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-RegularItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Medium.otf")      format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-MediumItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Semibold.otf")    format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-SemiboldItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Bold.otf")        format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-BoldItalic.otf")  format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Heavy.otf")       format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-HeavyItalic.otf") format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-Black.otf")       format("opentype"); }
@font-face { font-family: "SF Pro Display"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/SFProDisplay/SF-Pro-Display-BlackItalic.otf") format("opentype"); }

:root {
  /* ─── Brand · navy → cyan (extracted from MiStock logo) ───────── */
  --ms-navy-900: #082b54;   /* primary brand navy — wordmark, key surfaces */
  --ms-navy-800: #093967;
  --ms-navy-700: #0b5689;
  --ms-blue-600: #076c91;
  --ms-teal-500: #0a8eb3;
  --ms-cyan-500: #0bb1ce;   /* primary cyan accent — .com.ar dot */
  --ms-cyan-400: #0ac7db;
  --ms-cyan-300: #0cd2e3;
  --ms-cyan-100: #d5f9fd;   /* pale tint */

  /* Brand gradient — the logo M itself */
  --ms-brand-grad:       linear-gradient(135deg, #082b54 0%, #0b5689 45%, #0bb1ce 100%);
  --ms-brand-grad-soft:  linear-gradient(135deg, #093967 0%, #0a8eb3 100%);
  --ms-brand-grad-cyan:  linear-gradient(135deg, #076c91 0%, #0cd2e3 100%);

  /* Brand semantic */
  --ms-brand:          #082b54;        /* primary on-brand surface */
  --ms-brand-accent:   #0bb1ce;        /* the cyan accent */
  --ms-brand-glow:     rgba(11,177,206,0.35);

  /* ─── WhatsApp / channel greens (channel-color only, NOT brand) ─ */
  --ms-green-500: #25D366;     /* WhatsApp brand green */
  --ms-green-600: #00a884;     /* WhatsApp operator green — chat send FAB */
  --ms-green-700: #128C7E;     /* deep green — avatar gradient stop */
  --ms-green-400: #00ca9d;

  /* ─── Channel colors ───────────────────────────────────────────── */
  --ms-whatsapp:        #25D366;
  --ms-instagram:       #E4405F;
  --ms-instagram-grad:  linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ms-facebook:        #1877F2;
  --ms-facebook-deep:   #0056b3;
  --ms-messenger:       #1877F2;

  /* ─── Neutrals / chrome ────────────────────────────────────────── */
  --ms-bg-app:          #f0f2f5;   /* app backdrop */
  --ms-bg-panel:        #ffffff;   /* white surfaces */
  --ms-bg-hover:        #f5f6f6;   /* list row hover */
  --ms-bg-chat:         #efeae2;   /* chat wallpaper base */
  --ms-bg-note:         #fff9db;   /* internal note background */
  --ms-border-soft:     #f0f2f5;
  --ms-border-base:     #e9edef;
  --ms-border-bs:       #dee2e6;   /* Bootstrap default */

  /* ─── Text ─────────────────────────────────────────────────────── */
  --ms-fg-1:            #111b21;   /* near-black, primary text */
  --ms-fg-2:            #41525d;   /* secondary heading */
  --ms-fg-3:            #54656f;   /* icon stroke */
  --ms-fg-4:            #667781;   /* timestamps, meta */
  --ms-fg-5:            #6c757d;   /* BS muted fallback */
  --ms-fg-link:         #076c91;   /* unread name highlight (brand blue) */
  --ms-fg-note:         #856404;   /* internal-note text */

  /* ─── Status (Bootstrap contextual) ────────────────────────────── */
  --ms-success:         #28a745;
  --ms-warning:         #ffc107;
  --ms-warning-border:  #ffd43b;
  --ms-warning-deep:    #e6c200;
  --ms-danger:          #dc3545;
  --ms-info:            #17a2b8;
  --ms-primary:         #007bff;

  /* ─── Chat bubbles ─────────────────────────────────────────────── */
  --ms-bubble-in:       #ffffff;
  --ms-bubble-out:      #dcf8c6;   /* WhatsApp light-green */

  /* ─── Type ─────────────────────────────────────────────────────── */
  --ms-font-sans: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ms-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Extra weight tokens — SF Pro Display ships 100–900 */
  --ms-fw-thin:       100;
  --ms-fw-ultralight: 200;
  --ms-fw-light:      300;
  --ms-fw-regular: 400;
  --ms-fw-medium:     500;
  --ms-fw-semibold: 600;
  --ms-fw-bold: 700;
  --ms-fw-heavy:      800;
  --ms-fw-black:      900;

  --ms-fs-xxs:  0.6rem;   /*  9.6px — badge */
  --ms-fs-xs:   0.65rem;  /* 10.4px — timestamp */
  --ms-fs-sm:   0.75rem;  /* 12px   — small meta */
  --ms-fs-base: 0.875rem; /* 14px   — body default (BS4) */
  --ms-fs-md:   0.95rem;  /* 15.2px — message body */
  --ms-fs-lg:   1rem;     /* 16px   — contact name */
  --ms-fs-xl:   1.25rem;  /* 20px   — section title */
  --ms-fs-2xl:  1.5rem;   /* 24px   — h1 */
  --ms-fs-3xl:  2rem;     /* 32px   — hero h2 */

  --ms-lh-tight: 1.25;
  --ms-lh-normal: 1.5;

  /* ─── Spacing (BS4 scale) ──────────────────────────────────────── */
  --ms-space-0: 0;
  --ms-space-1: 0.25rem;  /*  4px */
  --ms-space-2: 0.5rem;   /*  8px */
  --ms-space-3: 1rem;     /* 16px */
  --ms-space-4: 1.5rem;   /* 24px */
  --ms-space-5: 3rem;     /* 48px */

  /* ─── Radii ────────────────────────────────────────────────────── */
  --ms-radius-sm:    4px;
  --ms-radius-md:    12px;   /* cards, panels */
  --ms-radius-pill:  20px;   /* filter pills, chips */
  --ms-radius-input: 25px;   /* composer textarea wrap */
  --ms-radius-hero:  40px;   /* empty-state hero card */
  --ms-radius-full:  9999px; /* avatars, circular icon buttons */

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --ms-shadow-hairline: 0 1px 0.5px rgba(11,20,26,.13);
  --ms-shadow-sm:       0 .125rem .25rem rgba(0,0,0,.075);
  --ms-shadow-md:       0 3px 6px rgba(0,0,0,0.1);
  --ms-shadow-lg:       0 10px 25px rgba(0,0,0,0.1);
  --ms-shadow-sidebar:  2px 0 5px rgba(0,0,0,0.05);

  /* ─── Layout constants ─────────────────────────────────────────── */
  --ms-sidebar-w:        400px;
  --ms-shell-h-inbox:    calc(100vh - 185px);
  --ms-shell-h-chat:     calc(100vh - 140px);
  --ms-composer-min-h:   240px;
  --ms-list-row-border:  1px solid var(--ms-border-soft);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --ms-transition-fast: all 0.2s;
  --ms-transition-base: all 0.3s;
}

/* ─── Utility classes ───────────────────────────────────────────── */

.ms-font { font-family: var(--ms-font-sans) !important; }
.ms-navy { color: var(--ms-navy-900) !important; }
.ms-bg-navy { background-color: var(--ms-navy-900) !important; }
.ms-cyan { color: var(--ms-cyan-500) !important; }
.ms-bg-cyan { background-color: var(--ms-cyan-500) !important; }
.ms-brand-grad { background: var(--ms-brand-grad) !important; }

.ms-radius-md { border-radius: var(--ms-radius-md) !important; }
.ms-radius-pill { border-radius: var(--ms-radius-pill) !important; }
.ms-shadow-sm { box-shadow: var(--ms-shadow-sm) !important; }
.ms-shadow-md { box-shadow: var(--ms-shadow-md) !important; }

.ms-body {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-fs-base);
  color: var(--ms-fg-1);
  line-height: var(--ms-lh-normal);
}

.ms-contact-name {
  font-family: var(--ms-font-sans);
  font-weight: var(--ms-fw-bold);
  font-size: var(--ms-fs-lg);
  color: var(--ms-fg-1);
}

.ms-message-body {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-fs-md);
  line-height: 1.4;
}