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

:root {
  --crm-bg: #f4f6fb;
  --crm-bg-soft: #f8fafc;
  --crm-surface: #ffffff;
  --crm-surface-alt: #f9fbff;
  --crm-text: #16181d;
  --crm-text-muted: #6f7785;
  --crm-border: #e5e9f2;
  --crm-border-soft: #eef2f8;
  --crm-border-strong: #d7deeb;

  --crm-brand: #b71930;
  --crm-brand-dark: #8f1226;
  --crm-brand-hover: #a5162d;
  --crm-brand-soft: rgba(183, 25, 48, 0.08);
  --crm-brand-soft-strong: rgba(183, 25, 48, 0.12);
  --crm-brand-ring: rgba(183, 25, 48, 0.18);
  --crm-brand-ring-soft: rgba(183, 25, 48, 0.08);
  --crm-brand-text-soft: var(--crm-brand-dark);
  --crm-brand-gradient: linear-gradient(135deg, var(--crm-brand-dark) 0%, var(--crm-brand) 72%, #cf314a 100%);
  --crm-brand-gradient-soft: linear-gradient(180deg, rgba(183, 25, 48, 0.085) 0%, rgba(183, 25, 48, 0.065) 100%);
  --crm-brand-surface-border: rgba(183, 25, 48, 0.12);

  --crm-danger-bg: #fff4f5;
  --crm-danger-border: #f4ccd4;
  --crm-danger-text: #b4233c;

  --crm-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
  --crm-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
  --crm-shadow-lg: 0 32px 90px rgba(15, 23, 42, 0.16);
  --crm-radius-sm: 14px;
  --crm-radius-md: 18px;
  --crm-radius-lg: 32px;

  --crm-layout-max: 1440px;
  --crm-sidebar-width: 280px;
  --crm-sidebar-width-collapsed: 96px;
  --crm-topbar-height: 76px;
  --crm-page-gutter: clamp(16px, 2vw, 28px);
  --crm-content-gap: clamp(16px, 2vw, 24px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--crm-text);
  background: var(--crm-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--crm-brand-ring);
  outline-offset: 2px;
}