/* Makana Design Tokens — variables CSS
 * Fuente de verdad: makana-mobile lib/ui/main (testing/stable).
 * Uso: importa este archivo y referencia var(--mk-*).
 * Fuentes: @import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');
 */

:root {
  /* ---- Marca ---- */
  --mk-color-primary: #004CDC;
  --mk-color-primary-focused: #003CB9;
  --mk-color-secondary: #00A3DC;
  --mk-color-turquoise: #41E3BD;   /* acento / borde botón primario */
  --mk-color-on-primary: #FFFFFF;

  /* ---- Superficies y texto (claro / default) ---- */
  --mk-color-surface: #FFFFFF;
  --mk-color-hero-surface: #F2F2F7;
  --mk-color-card-surface: #FFFFFF;
  --mk-color-on-surface: #38383D;
  --mk-color-on-surface-muted: #6E6E78;
  --mk-color-on-surface-placeholder: #A6A6B0;
  --mk-color-on-surface-disabled: #EBEBF0;
  --mk-color-divider: #EBEBF0;

  /* ---- Semánticos / estado ---- */
  --mk-color-success: #2DC26D;
  --mk-color-success-container: #EFFFF4;
  --mk-color-warning: #FFA844;
  --mk-color-warning-container: #FFF8F0;
  --mk-color-error: #FF707A;
  --mk-color-error-container: #FFF0F1;
  --mk-color-info: #00A3DC;
  --mk-color-info-container: #F0F9FF;
  --mk-color-selection: #2468E5;
  --mk-color-selection-container: #E8F0FE;

  /* ---- Feedback (escala de caras / mood) ---- */
  --mk-feedback-ecstatic: #004CDC;
  --mk-feedback-very-good: #2DC26D;
  --mk-feedback-good: #41E3BD;
  --mk-feedback-neutral: #FADE0A;
  --mk-feedback-bad: #FFA844;
  --mk-feedback-very-bad: #FF707A;
  --mk-feedback-foreground: #27272A;

  /* ---- Tipografía ---- */
  --mk-font-display: 'Saira', sans-serif;        /* display + headline */
  --mk-font-body: 'Open Sans', sans-serif;       /* títulos, body, labels */
  --mk-font-numeric: 'Saira Condensed', sans-serif;

  --mk-weight-regular: 400;
  --mk-weight-medium: 500;
  --mk-weight-semibold: 600;
  --mk-weight-bold: 700;

  /* font-size de la escala MD3 (px) */
  --mk-text-display-lg: 80px;
  --mk-text-display-md: 48px;
  --mk-text-display-sm: 36px;
  --mk-text-headline-lg: 32px;
  --mk-text-headline-md: 28px;
  --mk-text-headline-sm: 24px;
  --mk-text-title-lg: 22px;
  --mk-text-title-md: 20px;
  --mk-text-title-sm: 18px;
  --mk-text-body-lg: 16px;
  --mk-text-body-md: 14px;
  --mk-text-body-sm: 12px;
  --mk-text-label-lg: 14px;
  --mk-text-label-md: 12px;
  --mk-text-label-sm: 10px;

  /* ---- Spacing (grilla 4px) ---- */
  --mk-space-xxxs: 2px;
  --mk-space-xxs: 4px;
  --mk-space-xs: 8px;
  --mk-space-sm: 12px;
  --mk-space-md: 16px;
  --mk-space-lg: 20px;
  --mk-space-xl: 24px;
  --mk-space-xxl: 32px;
  --mk-space-xxxl: 44px;
  --mk-space-xxxxl: 64px;
  --mk-space-huge: 80px;

  /* ---- Radii ---- */
  --mk-radius-xs: 4px;
  --mk-radius-sm: 8px;     /* image */
  --mk-radius-md: 12px;    /* input */
  --mk-radius-lg: 16px;    /* card */
  --mk-radius-xl: 20px;    /* tooltip / bottom-sheet */
  --mk-radius-xxl: 24px;   /* chip */
  --mk-radius-pill: 28px;  /* button */
  --mk-radius-full: 9999px;
}

/* ---- Modo oscuro ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --mk-color-primary: #4B8BFF;
    --mk-color-surface: #252529;
    --mk-color-hero-surface: #33333A;
    --mk-color-card-surface: #33333A;
    --mk-color-on-surface: #E4E4E8;
    --mk-color-on-surface-muted: #B0B0BA;
    --mk-color-on-surface-placeholder: #6E6E78;
    --mk-color-divider: #2D2D32;
    --mk-color-success-container: #1A2E1F;
    --mk-color-warning-container: #2E2416;
    --mk-color-error-container: #3D1C1E;
    --mk-color-info-container: #162230;
    --mk-color-selection-container: #1A2340;
  }
}

/* ---- Ejemplo de componentes canónicos ---- */

/* Botón primario (CTA azul, pill, acento turquesa 3D) */
.mk-btn-primary {
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-title-md);
  font-weight: var(--mk-weight-bold);
  color: var(--mk-color-on-primary);
  background: var(--mk-color-primary);
  border: none;
  border-bottom: 3px solid var(--mk-color-turquoise); /* profundidad 3D */
  border-radius: var(--mk-radius-pill);
  padding: var(--mk-space-sm) var(--mk-space-xl);
  cursor: pointer;
  transition: transform .16s ease-in-out, box-shadow .16s ease-in-out;
}
.mk-btn-primary:active { transform: translateY(2px); border-bottom-width: 1px; }
.mk-btn-primary:disabled {
  background: var(--mk-color-on-surface-disabled);
  color: var(--mk-color-on-surface-muted);
  border-bottom-color: transparent;
  cursor: not-allowed;
}

/* Botón secundario (outline, pill) */
.mk-btn-secondary {
  font-family: var(--mk-font-body);
  font-weight: var(--mk-weight-semibold);
  color: var(--mk-color-primary);
  background: transparent;
  border: 1px solid var(--mk-color-divider);
  border-radius: var(--mk-radius-pill);
  padding: var(--mk-space-sm) var(--mk-space-xl);
  cursor: pointer;
}

/* Input */
.mk-input {
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-body-lg);
  color: var(--mk-color-on-surface);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-divider);
  border-radius: var(--mk-radius-md);
  padding: var(--mk-space-xs) var(--mk-space-sm);
}
.mk-input:focus { outline: none; border: 2px solid var(--mk-color-primary); }
.mk-input::placeholder { color: var(--mk-color-on-surface-placeholder); }

/* Card */
.mk-card {
  background: var(--mk-color-card-surface);
  border-radius: var(--mk-radius-lg);
  padding: var(--mk-space-md);
}