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

:root {
  /* === Brand palette (official) === */
  --brand-primary: #042b26;
  --brand-secondary: #c6ff00;
  --brand-tertiary: #0f4c44;
  --brand-neutral: #f9fbfb;

  /* === Colores base derivados === */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-tertiary);
  --color-primary-soft: color-mix(in srgb, var(--brand-primary) 10%, #ffffff 90%);

  --color-primary-dark: color-mix(in srgb, var(--brand-primary) 78%, #000000 22%);
  --color-secondary: color-mix(in srgb, var(--brand-tertiary) 30%, #ffffff 70%);
  --color-accent: var(--brand-secondary);
  --color-text: #17322e;
  --color-text-soft: #5f7671;
  --color-text-light: #788f8a;
  --color-background: var(--brand-neutral);
  --color-background-hover: color-mix(in srgb, var(--brand-neutral) 86%, #dfe9e7 14%);

  --color-contraste-micro: #415954;

  --color-border: #d8e3e0;
  --color-muted: #5f7671;
  --color-bg: var(--brand-neutral);
  --color-surface: #ffffff;
  --color-surface-soft: #eef4f3;

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

  --color-success: var(--brand-tertiary);
  --color-danger: #ef4444;
  --color-logout: #ef4444;

  /* === Legacy aliases (global compatibility) === */
  --brand-color: var(--brand-primary);
  --primary-color: var(--brand-primary);
  --primary: var(--brand-primary);
  --text-main: var(--color-text);
  --menu-cta-bg-hover: var(--brand-tertiary);

  /* === 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: var(--font-helvetica-neue), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, 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);
}