/* BBMT Design System — tokens + base typography
 * Source: portal.bbmtelecom.ro (Team Portal). Inter + aubergine.
 * Load alongside Google Fonts:
 *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────── */
  --bbmt-brand:        #4a154b;   /* aubergine, the anchor */
  --bbmt-brand-mid:    #6b2d6b;
  --bbmt-brand-glow:   rgba(74, 21, 75, 0.18);
  --bbmt-brand-soft:   rgba(74, 21, 75, 0.10);  /* tile-bg, focus ring */
  --bbmt-brand-logo-navy: #1a2347;  /* "BBMT" wordmark navy */
  --bbmt-brand-logo-red:  #c8112c;  /* logo globe red */

  /* ── Surfaces ─────────────────────────────────────────────── */
  --bbmt-bg:           #f0f2f5;
  --bbmt-surface:      #ffffff;
  --bbmt-surface-alt:  #f8f9fb;

  /* ── Borders ──────────────────────────────────────────────── */
  --bbmt-border:       rgba(0, 0, 0, 0.08);
  --bbmt-border-md:    rgba(0, 0, 0, 0.13);

  /* ── Text ─────────────────────────────────────────────────── */
  --bbmt-text:         #1a2535;
  --bbmt-muted:        #5a6a7e;
  --bbmt-faint:        #9aabb9;

  /* ── Tile accents (one per module) ────────────────────────── */
  --bbmt-tile-brand:   #4a154b;   /* Tasks */
  --bbmt-tile-blue:    #0891b2;   /* Messaging */
  --bbmt-tile-emerald: #059669;   /* Attendance */
  --bbmt-tile-orange:  #d97706;   /* Expenses */
  --bbmt-tile-teal:    #0d9488;   /* Orders / Protocols */
  --bbmt-tile-payroll: #0f766e;   /* Salarizare */
  --bbmt-tile-rose:    #e11d48;   /* Quality / Issues */
  --bbmt-tile-purple:  #7c3aed;   /* Teams Productivity */
  --bbmt-tile-slate:   #475569;   /* Admin */

  /* ── Status semantics ────────────────────────────────────── */
  --bbmt-status-todo:        #3b82f6;
  --bbmt-status-inprogress:  #f59e0b;
  --bbmt-status-inreview:    #8b5cf6;
  --bbmt-status-approved:    #10b981;
  --bbmt-status-blocked:     #ef4444;
  --bbmt-status-done:        #94a3b8;

  --bbmt-success:  #10b981;
  --bbmt-warning:  #f59e0b;
  --bbmt-danger:   #ef4444;
  --bbmt-danger-deep: #dc2626;
  --bbmt-info:     #3b82f6;

  /* ── Priority ─────────────────────────────────────────────── */
  --bbmt-priority-high:    #ef4444;
  --bbmt-priority-medium:  #f59e0b;
  --bbmt-priority-low:     #3b82f6;

  /* ── Operator chips ───────────────────────────────────────── */
  --bbmt-op-vodafone:  #e30613;
  --bbmt-op-orange:    #ff7900;
  --bbmt-op-telekom:   #e20074;
  --bbmt-op-digi:      #0043ce;

  /* ── Shadows ──────────────────────────────────────────────── */
  --bbmt-shadow-flat:     0 1px 2px rgba(16, 24, 40, 0.04);
  --bbmt-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --bbmt-shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.12);
  --bbmt-shadow-brand-btn:  0 2px 8px rgba(74, 21, 75, 0.18);
  --bbmt-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
  --bbmt-shadow-popover:  0 8px 32px rgba(0, 0, 0, 0.14);
  --bbmt-shadow-modal:    0 24px 80px rgba(15, 23, 42, 0.28);

  /* ── Radii ────────────────────────────────────────────────── */
  --bbmt-radius-xs:  8px;
  --bbmt-radius-sm:  10px;   /* small button, input */
  --bbmt-radius-md:  12px;
  --bbmt-radius-lg:  14px;   /* card, kanban col */
  --bbmt-radius-xl:  18px;   /* tile, big card */
  --bbmt-radius-2xl: 20px;   /* tile, panel */
  --bbmt-radius-3xl: 24px;   /* modal */
  --bbmt-radius-pill: 999px;

  /* ── Spacing (4-pt scale) ─────────────────────────────────── */
  --bbmt-space-1:  4px;
  --bbmt-space-2:  6px;
  --bbmt-space-3:  8px;
  --bbmt-space-4:  10px;
  --bbmt-space-5:  12px;
  --bbmt-space-6:  14px;
  --bbmt-space-7:  16px;
  --bbmt-space-8:  20px;
  --bbmt-space-9:  24px;
  --bbmt-space-10: 32px;
  --bbmt-space-12: 48px;

  /* ── Type ─────────────────────────────────────────────────── */
  --bbmt-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bbmt-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Legacy display stack (used only on pre-login marketing page) */
  --bbmt-font-display-legacy: 'Sora', 'Inter', sans-serif;
  --bbmt-font-body-legacy:    'IBM Plex Sans', 'Inter', sans-serif;

  /* Sizes (px, browser default 16) */
  --bbmt-fs-display:  clamp(34px, 5vw, 56px);  /* hero h1 */
  --bbmt-fs-h1:       clamp(26px, 4vw, 36px);  /* welcome name */
  --bbmt-fs-h2:       22px;
  --bbmt-fs-h3:       18px;
  --bbmt-fs-h4:       16px;
  --bbmt-fs-body:     14px;
  --bbmt-fs-body-sm:  13px;
  --bbmt-fs-meta:     12px;
  --bbmt-fs-micro:    11px;
  --bbmt-fs-eyebrow:  11px;
  --bbmt-fs-stat:     16px;
  --bbmt-fs-stat-lg:  22px;

  --bbmt-lh-tight:  1.0;
  --bbmt-lh-snug:   1.15;
  --bbmt-lh-base:   1.4;
  --bbmt-lh-relaxed:1.55;

  --bbmt-ls-tight:   -0.02em;
  --bbmt-ls-normal:  0;
  --bbmt-ls-loose:   0.03em;
  --bbmt-ls-eyebrow: 0.05em;
}

/* ── Semantic typography classes ──────────────────────────────
 * Drop these on elements to get the canonical look without rewriting CSS.
 */
.bbmt-display {
  font-family: var(--bbmt-font-sans);
  font-weight: 800;
  font-size: var(--bbmt-fs-display);
  letter-spacing: var(--bbmt-ls-tight);
  line-height: 0.97;
  color: var(--bbmt-text);
}
.bbmt-h1 {
  font-family: var(--bbmt-font-sans);
  font-weight: 800;
  font-size: var(--bbmt-fs-h1);
  line-height: 1.1;
  color: var(--bbmt-text);
}
.bbmt-h2 {
  font-family: var(--bbmt-font-sans);
  font-weight: 800;
  font-size: var(--bbmt-fs-h2);
  line-height: 1.2;
  color: var(--bbmt-text);
}
.bbmt-h3 {
  font-family: var(--bbmt-font-sans);
  font-weight: 700;
  font-size: var(--bbmt-fs-h3);
  line-height: 1.25;
  color: var(--bbmt-text);
}
.bbmt-h4 {
  font-family: var(--bbmt-font-sans);
  font-weight: 700;
  font-size: var(--bbmt-fs-h4);
  line-height: 1.3;
  color: var(--bbmt-text);
}
.bbmt-body {
  font-family: var(--bbmt-font-sans);
  font-weight: 400;
  font-size: var(--bbmt-fs-body);
  line-height: var(--bbmt-lh-base);
  color: var(--bbmt-text);
}
.bbmt-body-sm {
  font-family: var(--bbmt-font-sans);
  font-weight: 400;
  font-size: var(--bbmt-fs-body-sm);
  line-height: 1.45;
  color: var(--bbmt-text);
}
.bbmt-meta {
  font-family: var(--bbmt-font-sans);
  font-weight: 500;
  font-size: var(--bbmt-fs-meta);
  color: var(--bbmt-faint);
}
.bbmt-muted {
  color: var(--bbmt-muted);
}
.bbmt-eyebrow {
  font-family: var(--bbmt-font-sans);
  font-weight: 700;
  font-size: var(--bbmt-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--bbmt-ls-eyebrow);
  color: var(--bbmt-brand);
}
.bbmt-mono {
  font-family: var(--bbmt-font-mono);
}