/* ==============================
   UBIHOME DESIGN TOKENS
   Mobile First - Light Mode
============================== */

:root {
  /* === Colores base === */

  --color-primary: #399d57;
  --color-primary-hover: #268944;
  --color-primary-soft: #ecf3ee;

  --color-primary-dark: #2d513c;
  --color-secondary: #cbd5e0;
  --color-accent: #399d57;
  --color-text: #1a202c;
  --color-text-soft: #64748b;
  --color-text-light: #718096;
  --color-background: #f8f8f8;
  --color-background-hover: #f1f1f1;

  --color-contraste-micro: #475569;

  --color-border: #e2e8f0;
  --color-muted: #64748b;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f2f5;

  /* ========= ESTADOS ========= */

  --color-success: #4caf50;
  --color-danger: #ef4444;
  --color-logout: #ef4444;

  /* === Sombras estilo app === */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);

  /* ========= RADIO ========= */

  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40%;

  /* === Espaciado (8pt system) === */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* === Tipografía === */

  --font-primary: "Lexend", system-ui, -apple-system, sans-serif;

  /* === Tipografía Reescalada === */

  --text-micro: 0.625rem;
  /* 10px - Menos de esto es ilegible */

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  /* 12px -> 14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  /* 14px -> 16px */
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  /* 16px -> 18px */
  --text-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  /* 20px -> 24px */
  --text-xl: clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);
  /* 24px -> 36px */
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  /* 32px -> 64px */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}