/* =========================================================
   MIMALE — Design tokens
   Paleta: Bosque y Coral (P2)
   Capa 1 (primitive) → Capa 2 (semantic) → Capa 3 (component)
   ========================================================= */

:root {
	/* --- Capa 1: primitive ----------------------------------- */
	--m-green-900:  #16201A;
	--m-green-800:  #1C2620;
	--m-green-700:  #244538;
	--m-green-600:  #2E5A45;
	--m-green-500:  #3E6B55;
	--m-green-400:  #5A7D5A;
	--m-green-300:  #8AA08A;
	--m-green-200:  #B8C8B8;
	--m-green-100:  #D8E0D6;

	--m-cream-50:   #FFFCF5;
	--m-cream-100:  #FAF4E8;
	--m-cream-200:  #F2EAD8;
	--m-cream-300:  #E2D9C4;

	--m-coral-700:  #A0432A;
	--m-coral-600:  #C95838;
	--m-coral-500:  #E26A4C;
	--m-coral-400:  #ED876D;
	--m-coral-300:  #F2A589;
	--m-coral-200:  #F8CBB8;

	--m-gold-600:   #B58F5B;
	--m-gold-500:   #C9A876;
	--m-gold-400:   #DDBE94;
	--m-gold-300:   #E2CDA8;

	--m-ink-900:    #1C2620;
	--m-ink-700:    #4A554D;
	--m-ink-500:    #7A8278;
	--m-ink-300:    #A8AFA6;

	--m-white:      #FFFFFF;
	--m-danger-600: #B14545;
	--m-warning-500:#D49A3D;
	--m-success-500:#5A7D5A;

	/* --- Capa 2: semantic ------------------------------------ */
	--color-brand-primary:        var(--m-green-600);
	--color-brand-primary-hover:  var(--m-green-700);
	--color-brand-primary-soft:   var(--m-green-500);

	--color-bg-base:              var(--m-cream-100);
	--color-bg-surface:            var(--m-white);
	--color-bg-subtle:            var(--m-cream-200);
	--color-bg-inverse:           var(--m-ink-900);

	--color-ink-primary:          var(--m-ink-900);
	--color-ink-secondary:        var(--m-ink-700);
	--color-ink-muted:            var(--m-ink-500);
	--color-ink-inverse:          var(--m-cream-100);

	--color-accent:               var(--m-coral-500);
	--color-accent-hover:         var(--m-coral-600);
	--color-accent-soft:          var(--m-coral-300);

	--color-secondary:            var(--m-gold-500);
	--color-secondary-soft:       var(--m-gold-300);

	--color-border-default:       var(--m-cream-300);
	--color-border-strong:        var(--m-ink-900);

	--color-success:              var(--m-success-500);
	--color-warning:              var(--m-warning-500);
	--color-danger:               var(--m-danger-600);

	--color-focus-ring:           rgba(46, 90, 69, 0.35);

	/* --- Tipografía ----------------------------------------- */
	--font-display: 'Fraunces', 'Recoleta', Georgia, serif;
	--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fs-display-xl: clamp(3rem, 6vw, 5.5rem);
	--fs-display-l:  clamp(2.25rem, 4.5vw, 3.75rem);
	--fs-h1:         clamp(2rem, 3.5vw, 3rem);
	--fs-h2:         clamp(1.5rem, 2.5vw, 2.25rem);
	--fs-h3:         1.5rem;
	--fs-h4:         1.25rem;
	--fs-body-l:     1.125rem;
	--fs-body:       1rem;
	--fs-body-s:     0.875rem;
	--fs-caption:    0.75rem;
	--fs-label:      0.8125rem;

	--lh-tight:   1.05;
	--lh-display: 1.15;
	--lh-snug:    1.3;
	--lh-body:    1.6;

	--ls-tight:   -0.02em;
	--ls-display: -0.01em;
	--ls-wide:     0.04em;

	/* --- Spacing -------------------------------------------- */
	--space-1:   4px;
	--space-2:   8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;
	--space-9:  96px;
	--space-10: 128px;
	--space-11: 160px;

	--container-max:   1320px;
	--gutter-desktop:  32px;
	--gutter-mobile:   16px;

	/* --- Radius --------------------------------------------- */
	--radius-xs:   4px;
	--radius-sm:   8px;
	--radius-md:  12px;
	--radius-lg:  16px;
	--radius-xl:  24px;
	--radius-pill: 999px;

	/* --- Shadow --------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(28, 38, 32, 0.06);
	--shadow-md: 0 4px 16px rgba(28, 38, 32, 0.08);
	--shadow-lg: 0 12px 32px rgba(28, 38, 32, 0.10);
	--shadow-focus: 0 0 0 3px var(--color-focus-ring);

	/* --- Motion --------------------------------------------- */
	--duration-fast:  120ms;
	--duration-base:  220ms;
	--duration-slow:  400ms;
	--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
	--easing-enter:   cubic-bezier(0, 0, 0.2, 1);
	--easing-exit:    cubic-bezier(0.4, 0, 1, 1);

	/* --- Z-index ------------------------------------------- */
	--z-base:     0;
	--z-sticky:   100;
	--z-header:   200;
	--z-dropdown: 300;
	--z-overlay:  800;
	--z-modal:    900;
	--z-toast:   1000;

	/* --- Componente: button -------------------------------- */
	--btn-radius:          var(--radius-sm);
	--btn-padding-y:       12px;
	--btn-padding-x:       24px;
	--btn-min-height:      48px;
	--btn-font:            var(--font-body);
	--btn-weight:          600;
	--btn-letter-spacing:  0.01em;

	/* --- Componente: card ---------------------------------- */
	--card-radius:    var(--radius-md);
	--card-bg:        var(--color-bg-surface);
	--card-border:    1px solid var(--color-border-default);
	--card-shadow:    var(--shadow-sm);
	--card-hover-y:   -2px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}