/* ============================================
   PropCRM — Design Tokens & CSS Variables
   ============================================ */

:root {
  /* Brand */
  --brand: #1a56db;
  --brand-dark: #1240a8;
  --brand-light: #e8efff;

  /* Colors */
  --blue: #185FA5;
  --blue-light: #E6F1FB;
  --teal: #0F6E56;
  --teal-light: #E1F5EE;
  --green: #3B6D11;
  --green-light: #EAF3DE;
  --amber: #854F0B;
  --amber-light: #FAEEDA;
  --red: #A32D2D;
  --red-light: #FCEBEB;
  --coral: #993C1D;
  --coral-light: #FAECE7;

  /* Neutrals */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface2: #f0f2f8;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-hint: #9ca3af;

  /* Sidebar */
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-active-bg: rgba(255,255,255,0.08);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.05);
  --sidebar-width: 272px;

  /* Layout */
  --topbar-height: 70px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);

  /* Typography — fluid scale */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* Base font: 16px desktop, scales down on mobile */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.0625rem; /* 17px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.75rem;   /* 28px */

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.18s var(--ease);
}

/* ── Fluid base ── */
html {
  font-size: 18px; /* desktop base — grande y legible en 27" */
}

@media (max-width: 1440px) {
  html { font-size: 17px; }
}

@media (max-width: 1280px) {
  html { font-size: 16px; }
}

@media (max-width: 1024px) {
  html { font-size: 15px; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  :root { --sidebar-width: 260px; --topbar-height: 60px; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
}